css/html positioning question? internet explorer reading code different from mozilla?

Question

Every time I position my id="banner2", internet explorer 7 seems to reinvent where the origin on the page is to the middle-center this is SO frustrating.

CSS page:

#main
{
position: absolute;
left: 0px;
top: 230px;
width: 840px;
background-color:rgb(36, 82, 90);
font-family: serif;
color: white;
font-size:12pt;
border: 2px solid white;
padding: 10px;
}


#links
{
position: absolute;
left: 30px;
top: 0px;
width: 140px;
background-color: rgb(36, 82,90)
}

#links a
{
display: block;
font-family: serif;
color: white;
font-size: 16pt;
border: 1px solid white;
text-decoration:none
}

#banner
{
position: absolute;
left: 200px;
top: 20px;
border: 1px solid white
}

body
{
background-color:rgb(99,166,177)
}

HTML page:

CONTENT

#banner2 is included in the styles sheet, i just didn't have room to post that.

4 answers

It's really important that you post what your #banner2 element looks like; otherwise, it's impossible to troubleshoot the CSS. Especially since the only id's that you're using in the body are banner and banner2. Just add in another section of details.

One important thing I see in the snippet is that your img tag for banner2 isn't closed.

should be

If you're going to adhere tightly to xhtml standards, then you would also include a default "alt"

but, this isn't important for your troubleshoot at the moment, just something to keep in mind for later.


Couple other notes:

It's great to see new webmasters using CSS for layout and positioning. That's the way to go. Using tables is 1990's and old-fashioned. Not to mention that it has been deprecated by http://www.w3.org/ (_the_ standards body) and won't validate to current standards.

It looks like you have a mix of code here. That's okay, but you'll want to start looking at some of the xhtml standards. For instance, you do a good job of closing some of your tags with " />", but missed on the ones.

You have your CONTENT section _below_ the closed . I would imagine that you actually want it _in_ the body of the html document, which is much more typical.

You have the CONTENT bracketed with div's, but no class or id specified for the layout of your content. You'll need to fix that.

You've called an external stylesheet, which is good, but then leave an empty call for an internal style area with the section.



If you're not going to use any unique style internal to this doc, then you can get rid of those two lines. They don't hurt anything, but are non-essential if all of your css is external.

Keep at it! You'll get the hang of it. In the meantime, here's a couple of my favorite CSS sites,

http://www.cssplay.co.uk/
Great site with excellent array of menus - vertical, horizontal, multi-level, fly-outs, etc ... all 100% CSS driven. Nice image galleries, too, using just CSS.

http://www.dynamicdrive.com/style/
Another excellent site. Good source of CSS layout examples including static, liquid, and mixed. Also has a great variety of javascript code.

IE has a method of hiding/enabling code based on browser version but can also be used to ignore code. Internet Explorer will ignore this while all other browsers will ignore the if tags (since they're just comment tags intepretted by IE) and will link the stylesheet. This way you can use 'display: none;' on anything you want IE to hide and then 'display: block;' them back in in the non-IE style.

IE and Firefox can have different parameter names.

I'm afraid tables are the only compatible with all browsers.

Answer 1

It's really important that you post what your #banner2 element looks like; otherwise, it's impossible to troubleshoot the CSS. Especially since the only id's that you're using in the body are banner and banner2. Just add in another section of details.

One important thing I see in the snippet is that your img tag for banner2 isn't closed.

Answer 2

IE has a method of hiding/enabling code based on browser version but can also be used to ignore code. Internet Explorer will ignore this while all other browsers will ignore the if tags (since they're just comment tags intepretted by IE) and will link the stylesheet. This way you can use 'display: none;' on anything you want IE to hide and then 'display: block;' them back in in the non-IE style.

Answer 3

IE and Firefox can have different parameter names.

Answer 4

I'm afraid tables are the only compatible with all browsers.