Hi,
I just finished designing a website and before putting content in it, I thought I'd test with other browsers. In Internet Explorer it works fine, but in Firefox and Opera the layout changes and it looks like this:
Firefox (<!-- m --><a class="postlink" href="http://pages.intnet.mu/didierah/firefox.gif">http://pages.intnet.mu/didierah/firefox.gif</a><!-- m -->)
Opera (<!-- m --><a class="postlink" href="http://pages.intnet.mu/didierah/opera.gif">http://pages.intnet.mu/didierah/opera.gif</a><!-- m -->)
Isn't CSS normally compatible with the last versions of these browsers? So why is it behaving like that?Well you see, IE is a pile of greasy w... *self-censored*.
IE wouldn't know what a standard was if one hit it in the face, therefore when you're making a site, it's always best to make it work in the standards complient browsers first (Mozilla, Opera etc.) then apply fixes for IE. Sometimes CSS hacks are neccessary, but try to stay away from these as best as possible.But it looks like these three browsers don't bahave the same way at all. For exemple, the bottom blue bar that is shifted with Firefox is placed well in Opera. And the header position as well isn't te same.
So there couldn't be a standard rule??Well, these browsers will interpret code slightly differently sometimes, if they didn't then they'd effectively be the same browser. Not being able to see your code on this I may be wrong, but it cold be that your markup is invalid or you don't have a DOCTYPE or maybe you've just used some CSS to wangle your layout to look right in IE that causes a split between how Opera and Mozilla render your site.Well, I'm quite new at CSS, so I don't really know what I'm doing right or wrong yet.
I'll be happy if you could have a look at the code.
The HTML can be viewed on the page (<!-- m --><a class="postlink" href="http://pages.intnet.mu/didierah/website">http://pages.intnet.mu/didierah/website</a><!-- m -->) (updated to add the two languages links). There's the CSS code:
<style type="text/css">
<!--
body{margin:0; padding:0;}
background-color: #F5F5F5
<!--
/////////
//FONT//
///////
-->
p {font-size: 10pt; font-family: arial;}
form {display:inline;}
a {font-size: 8pt; font-family:arial;}
A.one:link {
color: black;
text-decoration: none
}
A.one:visited {
color: black;
text-decoration: none
}
A.one:hover {
color: white;
background: black;
}
A.two:link {
color: black;
text-decoration: none
font-size: 6pt;
}
A.two:visited {
color: black;
text-decoration: none
font-size: 6pt;
}
A.two:hover {
color: ORANGE;
text-decoration: none
}
A.ddr:link {
color: #CCCCCC;
text-decoration: none
}
A.ddr:visited {
color: #CCCCCC;
text-decoration: none
}
A.ddr:hover {
color: #FFFFFF;
text-decoration: none
}
<!--
//////////////
//POSITIONS//
////////////
-->
div.container {
width:760px;
position: absolute;
top: 0%;
left: 0%;
}
img {
border: 0;
}
div.banner {
position: absolute;
top: 0px;
left: 0px;
}
div.top {
position: absolute;
top: 116px;
left: 0px;
}
div.leftorng {
position: absolute;
top: 131px;
left: 0px;
}
div.leftorngbtm {
position: absolute;
top: 599px;
left: 0px;
}
div.leftmenubg {
position: absolute;
top: 131px;
left: 15px;
}
div.leftmenubgbtm {
position: absolute;
top: 598px;
left: 15px;
}
div.language {
position: absolute;
top: 135px;
left: 125px;
}
div.hpc {
position: absolute;
top: 131px;
left: 540px;
}
div.headerleft {
position: absolute;
top: 161px;
left: 122px;
}
div.header {
position: absolute;
top: 161px;
left: 164px;
}
div.headerleftbar {
position: absolute;
top: 212px;
left: 122px;
}
div.container2 {
position: absolute;
top: px;
left: px;
}
div.container3 {
position: absolute;
top: 161px;
left: 516px;
}
div.btmleftblu {
position: absolute;
top: 614px;
left: 0px;
}
div.btmlinksbg {
position: absolute;
top: 613px;
left: 15px;
}
div.btmrightblu {
position: absolute;
top: 613px;
left: 747px;
}
div.footer {
position: absolute;
top: 649px;
left: 0px;
}
div.ddr {
position: absolute;
top: 651px;
left: 142px;
}
div.btmright {
position: absolute;
top: 649px;
left: 685px;
}
div.right {
position: absolute;
top: -1px;
left: 759px;
}
div.btmlinks {
position: absolute;
top: 629px;
left: 171px;
}
-->
</style>There are some problems with your HTML (<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fpages.intnet.mu%2Fdidierah%2Fwebsite%2F">http://validator.w3.org/check?uri=http% ... website%2F</a><!-- m -->) when run through the validator. The missing ALT tag stuff should not affect the layout, but check out the others.
There are also a number of CSS errors (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fpages.intnet.mu%2Fdidierah%2Fwebsite&usermedium=all">http://jigsaw.w3.org/css-validator/vali ... medium=all</a><!-- m -->).
When you have any errors like those showing up above, you are then at the mercy of each browser trying to either "guess" what you meant or just giving up and not trying; so each browser is likely to look different.Excellent. Will modify these now.I have corrected the errors, except the ALT and generic font, but I still get the images shifted in Firefox and Opera.
I'm starting to get frustrated by this and they are expecting me to upload the site in two days, and that makes me more stressed!
Pleeeeeeeease help me!I'm wondering if adding the applicable width and height attributes to the <img src=http://www.webdeveloper.com/forum/archive/index.php/"gfx/top.gif"> tag would take care of the extra space?That didn't change the display. Is there anything else I've missed?hey hitman
firefox is very strict with sizes
you need to be more accurate with you div and img sizes i think...
for example: leftmenubgbtm height = 15px but the imagesize of left_menubg_btm.gif = 14px
Another one:
btm_left_blu.gif = 35px / btm_links.gif = 36px (height) they should be the same size right??
I think the problem is that the image sizes are not defined and that the sizes are not really accurate...
hope this might help
cheers,
ronald
I just finished designing a website and before putting content in it, I thought I'd test with other browsers. In Internet Explorer it works fine, but in Firefox and Opera the layout changes and it looks like this:
Firefox (<!-- m --><a class="postlink" href="http://pages.intnet.mu/didierah/firefox.gif">http://pages.intnet.mu/didierah/firefox.gif</a><!-- m -->)
Opera (<!-- m --><a class="postlink" href="http://pages.intnet.mu/didierah/opera.gif">http://pages.intnet.mu/didierah/opera.gif</a><!-- m -->)
Isn't CSS normally compatible with the last versions of these browsers? So why is it behaving like that?Well you see, IE is a pile of greasy w... *self-censored*.
IE wouldn't know what a standard was if one hit it in the face, therefore when you're making a site, it's always best to make it work in the standards complient browsers first (Mozilla, Opera etc.) then apply fixes for IE. Sometimes CSS hacks are neccessary, but try to stay away from these as best as possible.But it looks like these three browsers don't bahave the same way at all. For exemple, the bottom blue bar that is shifted with Firefox is placed well in Opera. And the header position as well isn't te same.
So there couldn't be a standard rule??Well, these browsers will interpret code slightly differently sometimes, if they didn't then they'd effectively be the same browser. Not being able to see your code on this I may be wrong, but it cold be that your markup is invalid or you don't have a DOCTYPE or maybe you've just used some CSS to wangle your layout to look right in IE that causes a split between how Opera and Mozilla render your site.Well, I'm quite new at CSS, so I don't really know what I'm doing right or wrong yet.
I'll be happy if you could have a look at the code.
The HTML can be viewed on the page (<!-- m --><a class="postlink" href="http://pages.intnet.mu/didierah/website">http://pages.intnet.mu/didierah/website</a><!-- m -->) (updated to add the two languages links). There's the CSS code:
<style type="text/css">
<!--
body{margin:0; padding:0;}
background-color: #F5F5F5
<!--
/////////
//FONT//
///////
-->
p {font-size: 10pt; font-family: arial;}
form {display:inline;}
a {font-size: 8pt; font-family:arial;}
A.one:link {
color: black;
text-decoration: none
}
A.one:visited {
color: black;
text-decoration: none
}
A.one:hover {
color: white;
background: black;
}
A.two:link {
color: black;
text-decoration: none
font-size: 6pt;
}
A.two:visited {
color: black;
text-decoration: none
font-size: 6pt;
}
A.two:hover {
color: ORANGE;
text-decoration: none
}
A.ddr:link {
color: #CCCCCC;
text-decoration: none
}
A.ddr:visited {
color: #CCCCCC;
text-decoration: none
}
A.ddr:hover {
color: #FFFFFF;
text-decoration: none
}
<!--
//////////////
//POSITIONS//
////////////
-->
div.container {
width:760px;
position: absolute;
top: 0%;
left: 0%;
}
img {
border: 0;
}
div.banner {
position: absolute;
top: 0px;
left: 0px;
}
div.top {
position: absolute;
top: 116px;
left: 0px;
}
div.leftorng {
position: absolute;
top: 131px;
left: 0px;
}
div.leftorngbtm {
position: absolute;
top: 599px;
left: 0px;
}
div.leftmenubg {
position: absolute;
top: 131px;
left: 15px;
}
div.leftmenubgbtm {
position: absolute;
top: 598px;
left: 15px;
}
div.language {
position: absolute;
top: 135px;
left: 125px;
}
div.hpc {
position: absolute;
top: 131px;
left: 540px;
}
div.headerleft {
position: absolute;
top: 161px;
left: 122px;
}
div.header {
position: absolute;
top: 161px;
left: 164px;
}
div.headerleftbar {
position: absolute;
top: 212px;
left: 122px;
}
div.container2 {
position: absolute;
top: px;
left: px;
}
div.container3 {
position: absolute;
top: 161px;
left: 516px;
}
div.btmleftblu {
position: absolute;
top: 614px;
left: 0px;
}
div.btmlinksbg {
position: absolute;
top: 613px;
left: 15px;
}
div.btmrightblu {
position: absolute;
top: 613px;
left: 747px;
}
div.footer {
position: absolute;
top: 649px;
left: 0px;
}
div.ddr {
position: absolute;
top: 651px;
left: 142px;
}
div.btmright {
position: absolute;
top: 649px;
left: 685px;
}
div.right {
position: absolute;
top: -1px;
left: 759px;
}
div.btmlinks {
position: absolute;
top: 629px;
left: 171px;
}
-->
</style>There are some problems with your HTML (<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fpages.intnet.mu%2Fdidierah%2Fwebsite%2F">http://validator.w3.org/check?uri=http% ... website%2F</a><!-- m -->) when run through the validator. The missing ALT tag stuff should not affect the layout, but check out the others.
There are also a number of CSS errors (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fpages.intnet.mu%2Fdidierah%2Fwebsite&usermedium=all">http://jigsaw.w3.org/css-validator/vali ... medium=all</a><!-- m -->).
When you have any errors like those showing up above, you are then at the mercy of each browser trying to either "guess" what you meant or just giving up and not trying; so each browser is likely to look different.Excellent. Will modify these now.I have corrected the errors, except the ALT and generic font, but I still get the images shifted in Firefox and Opera.
I'm starting to get frustrated by this and they are expecting me to upload the site in two days, and that makes me more stressed!
Pleeeeeeeease help me!I'm wondering if adding the applicable width and height attributes to the <img src=http://www.webdeveloper.com/forum/archive/index.php/"gfx/top.gif"> tag would take care of the extra space?That didn't change the display. Is there anything else I've missed?hey hitman
firefox is very strict with sizes
you need to be more accurate with you div and img sizes i think...
for example: leftmenubgbtm height = 15px but the imagesize of left_menubg_btm.gif = 14px
Another one:
btm_left_blu.gif = 35px / btm_links.gif = 36px (height) they should be the same size right??
I think the problem is that the image sizes are not defined and that the sizes are not really accurate...
hope this might help
cheers,
ronald