...

View Full Version : CSS/HTML browser compatibility help!



kyleshea22
05-19-2009, 10:02 PM
Hi all! Although not new to HTML and coding in general; I'm fairly new to the full CSS layout concept... My first attempt is going well - but I've found that what I worked up in Internet Explorer doesn't look so hot in FireFox. I'm using IE 7 and FireFox 3. Check out the following in IE, looks like I intended:

http://www.printwell.com/newprintwell

Then check in FireFox. Note particularly the top and bottom are way "off".

My HTML:
http://www.printwell.com/newprintwell/default.htm

My CSS:
http://www.printwell.com/newprintwell/styles.css

ANY help would be greatly appreciated! :)

Thanks!

drhowarddrfine
05-20-2009, 12:21 AM
You have to check your markup in a modern browser first, never IE. IE will screw you up more than anything. It is 11 years behind all other browsers in standards. So first get your markup working in anything else, Firefox/Safari/Opera, then look to see if/when IE screws it up.

Also, validate your html and css. You have 4 css errors (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.printwell.com%2Fnewprintwell%2F&profile=css21&usermedium=all&warning=1&lang=en). In your html, you are using 'menu' as an id more than once. id names are unique and can only be used once on a page.

kyleshea22
05-20-2009, 03:07 PM
Thanks for the advice! I validated my CSS and HTML and fixed all of the errors. However - my layout still doesn't look as I intended in FireFox, etc. It does however look as I want it to look in IE. I'm missing something. In IE, the green at the top of the screen goes all the way to the top of the window, and the black footer bar at the bottom is properly placed at the bottom of the window. However in FireFox and other browsers, the green top is nudged down and the footer bar apperas to be moved way up behind the 2-column content divs. Do I need to do something with z-index? HELP! :)

kyleshea22
05-20-2009, 03:29 PM
PS: It seems that something in my "header" div is forcing the content of my "main" div down from the top of the page... When I remove the entire "header" section; the top of the "main" div aligns to the top of the window as expected.

kyleshea22
05-20-2009, 03:34 PM
Update, problem #1 solved (the top) by adding this to the "main" div css:

position: absolute;
top: 0px;
left: 0px;

Now on to the bottom...

brazenskies
05-20-2009, 03:34 PM
It is 11 years behind all other browsers in standards.

Just out of interest, where did you pluck 11 years from?

drhowarddrfine
05-20-2009, 03:44 PM
Start with the this (http://www.w3.org/2003/02/06-dom-support.html) and then look at the first link in my sig. But there are hundreds of such things. This is well known.

kyleshea, as I said, we don't care what IE is doing yet. I'll look at your page in a few. Notice that none of the other browsers work like IE so what does that tell us about IE?

brazenskies
05-20-2009, 03:49 PM
it's just funny, because when I google for it, it's just a bunch of links to forums with your posts hatemongering IE.

I couldn't see anyone else mentioning '11 years' anywhere.

Just an observation

drhowarddrfine
05-20-2009, 03:52 PM
When you google for what? 11 years? You just go to the first link, see the test, and subtract the years. The second link says "a decade behind". Close enough.

drhowarddrfine
05-20-2009, 03:57 PM
@kyleshea,
I don't see any differences now. Is it fixed?

kyleshea22
05-20-2009, 04:09 PM
Got it. Along with other things, I had to switch the black bar image in the footer from being a background to a regular old image img. For whatever reason - when setup as a background - the div didn't fall under the div above. When changed to an image - it was positioned under the above div as I intended. So, not sure if it's done "right" - but it's fixed! ;)

Thanks again!

kyleshea22
05-20-2009, 04:15 PM
This seems to be a common issue I have; divs are having trouble falling UNDER the div above and want to align vertically right over top of the previous div. I thought that divs on a page are positioned by default in vertical order from top to bottom? Maybe I'm mistaking.

drhowarddrfine
05-20-2009, 04:19 PM
Yes, block level elements, such as the div, do that, but images are inline unless declared otherwise. You are also floating some of those so that could come into play. Also, absolute positioning removes elements from the normal flow.

kyleshea22
05-20-2009, 04:20 PM
Can anybody explian why in IE, the following produces 2 LINES; both centered on the page, with the second being UNDER the first and text right aligned.. And in FireFox - 1 LINE with the second being over top of the first. ???

<div style="width: 800px; height: 8px; margin-left: auto; margin-right: auto;"><img src="images/footer.jpg" alt="" border="0" /></div>

<div style="width: 800px; margin-left: auto; margin-right: auto; text-align: right;">Copyright 2009 Printwell Acquisitions, Inc.</div>

abduraooft
05-20-2009, 04:47 PM
It might be due to the box model bug of IE (http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug). Have a try by the following

#leftContentColHeader {/*styles.css (line 114)*/
background-image:url(images/tableHeader_bg.jpg);
background-repeat:repeat-x;
height:26px;
/*width:250px;*/
}
#leftContent {/*styles.css (line 122)*/
font-size:10px;
margin:4px 6px 10px 4px;
/*width:250px;*/
}
#rightContentCol {/*styles.css (line 132)*/
/*float:right;
height:225px;
width:543px;*/
margin-left:260px;

}
#rightContent {/*styles.css (line 147)*/
font-size:10px;
margin:4px 6px 10px 4px;
/*width:543px;*/
}
#rightContentColHeader {/*styles.css (line 139)*/
background-image:url(images/tableHeader_bg.jpg);
background-repeat:repeat-x;
height:26px;
/*width:543px;*/
}


have a look at http://bonrouge.com/2c-hf-fixed.php to see how to make a good 2 column layout.

kyleshea22
05-20-2009, 04:58 PM
Thx abduraooft... My columns seem to be OK... The issue I run into more is divs supposed to be offset vertically (under each other) being placed right on top of one another; as in the 2 lines above... This isn't the case in IE however; just wondering what the difference was.

abduraooft
05-20-2009, 05:16 PM
I repeat what drhowarddrfine said in his first post in a different way,

"Code it for Firefox and then hack it for IE, if required!"

drhowarddrfine
05-20-2009, 06:04 PM
You set the height of the div to 8px and the image is overflowing. IE8 does the same thing but IE7 is improperly expanding the element to contain it. As usual, IE is wrong and FF is correct.

(IE8 has finally corrected their CSS2.1 implementation after 8 years of getting this wrong.)

kyleshea22
05-20-2009, 09:25 PM
Thanks! Now I guess I don't understand why the image is overflowing give it's height is indeed 8px; as is the container div... My apologies for my ignorance! ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum