|
|
 |
|
|
Pages: 1
CSS cross-browser headache.
(Click here to view the original thread with full colors/images)
Posted by: newphase
Website: actual page
CSS: css file
I have a website created in div's and using CSS for styling after somebody said i should be seperating structure from formatting, anyway i digress. the problem i'm particularly having trouble with is margins - if you are viewing the webpage given above in Internet Explorer then you will most probably see it as intended. However, when trying to view this same site in mozilla/opera/netscape/<insert other non-IE browser here> the menu and footer div's end up overunning the layout and shooting off the end of the page.
Example: error
I think i understand why this happens, IE renders the div without allowing it to flow over another element (the border of the main content div) however opera and other browsers show the full div shifted to the right. I have tried to specify the exact width but unfortunately internet explorer and the other browsers line up at different div widths (typical!). I am most probably doing this wrong, so any help much appreciated as to a hotfix for other browsers or a rewrite of the functionality is greatfully accepted.
cheers in advance.
Posted by: illuminati
I doubt you are doing this wrong, in most cases the two don't follow the same standards. This is the reason so many be either code two different versions, or standardize on one browser, and add a link to the site that says best viewed with.. blah blah blah. I wish you lots of luck, you can always try changing the margins, or refering to http://www.devguru.com for there syntax guides. They have a complete one for CSS.
Posted by: privatepepper
If you're having trouble with width in different browsers, I'd suggest reading about the Box Model Hack. It allows you to take advantage of the bugs in IE's horrible rendering engine so you can define things for both IE and W3-compliant browsers. The way I do it is:
Code:
/* IE's definition */
some.selector {
width: 100px;
}
/* CSS2 definition, which IE doesn't understand */
top.selector>some.selector {
width: 120px;
}
Helps to know something about CSS2 when playing with this 
Hope that helped.
Posted by: newphase
I have solved the problem in the end (just in time for the coursework deadline). Turns out I used a similar hack using Internet Explorer specific properties to seperate the width values of the div.
 Quote:
<!--[if gte IE 5.5]>
<style type="text/css">
div#menu { width: 343px }
div#creditFooter { width: 600px; }
</style>
<![endif]-->
|
Anything greater or equal to internet explorer 5.5 (i think) will render using the values in the head and other browsers will ignore these and use the .css file values instead. Tada! problem solved.
Thanks for the replies guys
ps. everybody should join the fight for full browser compatibility to w3c's CSS standards.
|
|
|
|
|
