Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Centering in browsers 1

Status
Not open for further replies.
zackat

zackat

Technical User
Feb 14, 2005
8
NL
Hi,

I am trying to figure out what causes IE 6 and Mozilla 1.7.5 to interpret the following differently. I would like to center my page using css. To start from the beginning I am creating a div with nothing in it, centering it and adding a border. I would expect both browser to "behave" similair. I think that Mozilla is showing me exactly what I want it to show me, a horizontal line. But IE 6 is giving me a box, something I didn't expect.

I would appreciate some explanation and some way to have the browser behave the same.

This is what I have in my html:
<body><div id="wrap"></div></body>

This is my CSS:
/* CSS Document */

* {
margin:0;
padding:0;
border:0;
}

body {
text-align:center;
}

div#wrap {
width: 750px;
margin:0 auto;
border:1px solid black;
}

Hope to hear from you
Greetings
Zackat

(PS, sorry for replying on previous post, with this new post)
 
Sort by date Sort by votes
Complete your html with a valid doctype. Other than that, IE might want to make room for text in the box, so you might want to specify font-size: 0; for IE. But since you're probably not looking to output a line (there are easier ways to do that), you might simply ignore that.
 
Upvote 0 Downvote
Not sure why the browsers behave differently but if you just want a horizontal line then surely an <hr> would be a better solution?

--James
 
Upvote 0 Downvote
Hi,

For simplicity sake, I thought well...I'll only add the css code. But this is the html, including doctype

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<title>Browser Check</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body><div id="wrap"></div></body>
</html>
 
Upvote 0 Downvote
Hi James,

It' not that I want a horizontal line. The thing is that I would like a basic startup position in which the browsers behave a like. This "wrap", is the base of all div's that will go into it. So this should be ok and I don't think there is any need for it to behave a different way in these browsers.

Zackat
 
Upvote 0 Downvote
The <xml> part at the top confuses IE and sends it back to quirks mode. Get rid of it to force IE to follow the standards (as much as it can).
 
Upvote 0 Downvote
Hi Vragabond,

Getting rid of the <xml>, unfortunately doesn't solve the problem.

Zackat
 
Upvote 0 Downvote
The browsers are only behaving differently because the div is empty (add a single line of text into the div and they all look fine). Seeing as this div is going to contain your whole page I don't think it's going to be a problem! ;-)

--James
 
Upvote 0 Downvote
Hi James,

You are right, I hope it won't be a problem. Adding some lines makes the browser act the same. But still it doesn't make sense, when there is nothing there, it should intepret is as nothing there ...

I'll continue greating some div's in this div, and see from there...

Thanks
Zackat
 
Upvote 0 Downvote
zackat said:
But still it doesn't make sense, when there is nothing there, it should intepret is as nothing there ...
Click to expand...

I think we're all well aware, with IE, what it should do and what it actually does do can be two entirely different things...

--James
 
Upvote 0 Downvote
Hi James,

..ok, the quote, I know...

but,
I added some div's :) in the html:
<body>
<div id="wrap">
<div id="header">
<div id="topborder"></div>
</div>
</div>
</body>

...and adjusted the css
div#header
width: 100%;
border:1px solid red;
}

div#topborder {
width:100%;
height:5px;
border:1px solid navy;
}

...in IE, it shows me a box approx 15px higher, in Moz it gives me exactly what I expect. As I thought, if I continue in this way, I still will endup with something at the bottom I don't want.

Suppose I would like to fill the div#topborder with a background image of 5px height and decide to leave this webpage as it is, it should still give a in both browser this image in 5 px height, nothing else, not even some "empty lines"
I bet, someone stumbled on this before...


 
Upvote 0 Downvote
You have not reported if setting the font size to 0 for that div helped with IEs oversizing it.
 
Upvote 0 Downvote
Hi Vragabond,

Sorry about that. I tried it before but it did not work out, I still had 2px space. Then I tried it again, wrapping a div around the "wrap" div, and it looks pretty ok to me.

This is what I added in the css:
body {
text-align:center;
font-size:0;
}

I think this will for me. Thanks!!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
818
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
781
PeDa
PeDa
jason.lex
  • Locked
  • Question
iPhone browsers (chrome and safari) output different compared to other browsers 1
Replies
2
Views
152
jason.lex
jason.lex

Part and Inventory Search

Sponsor

Back
Top