PDA

View Full Version : css/html positioning question? internet explorer reading code different from mozilla?

Just Believe
10-17-2007, 01:54 PM
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:
<html>
<head>
<title>my page</title>

<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>

</head>

<body>

<div id="banner"><img src="banner.gif"></div>
<div id="banner2"><img src="banner2.gif"</div>
</body>
<div>CONTENT</div>
</html
#banner2 is included in the styles sheet, i just didn't have room to post that.
★Greed★
10-17-2007, 01:54 PM
IE and Firefox can have different parameter names.
Daniel Rodd
10-17-2007, 01:56 PM
I'm afraid tables are the only compatible with all browsers.
Kevin
10-17-2007, 01:56 PM
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.

<div id="banner2"><img src="banner2.gif"</div>

should be

<div id="banner2"><img src="banner2.gif" /></div>

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

<div id="banner2"><img src="banner2.gif" alt="" /></div>

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 <img src ... /> ones.

You have your CONTENT section _below_ the closed </body>. 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.

<style type="text/css">
</style>

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.