Log in

View Full Version : Mozilla vs. IE


Satoko
12-14-2006, 03:55 AM
Why can't there be one perfect browser for everyone to use so I don't have to figure out the coding differences between the two?

In IE, my layout is centered, but my navigation bar won't stay to the left of the text.

In Mozilla, my layout is off center, but my navigation bar is in the right spot.

I'm no HTML genius, and I don't claim to be, so be kind. It's easy to look on Google for basic codes, but not so easy to use them and understand why I'm using them.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Quality Tile</title>
<style type="text/css">
body
{
background: #a58b74;
background-image: url(http://i2.photobucket.com/albums/y4/paraparasatoko/bg-2.png);
background-repeat: repeat-x;
background-position: top left;
background-attachment: fixed;
margin-top: 40px;
font-size:10px;
font-family:vernada;
overflow: auto;
text-align: center;
}

.box
{
width: 604px;
height: 594px;
z-index: 1;
margin: 0 auto;
}

#boxContent
{
border: none;
}

#boxContent
{
position: relative;
left: -4px;
top: -4px;
}

#boxContainer
{
position: relative;
background: #666;
margin: 4px;
}

#text
{
position: absolute;
width: 478px;
height: 475px;
left: 126px;
top: 117px;
overflow: auto;
border: 1px solid;
scrollbar-face-color : #ffffff;
scrollbar-highlight-color : #ffffff;
scrollbar-3dlight-color : #ffffff;
scrollbar-shadow-color : #ffffff;
scrollbar-darkshadow-color : #ffffff;
scrollbar-track-color : #ffffff;
scrollbar-arrow-color : #000000;
text-align: left;
z-index: 2;
}

#nav
{
position: relative;
width:125px;
height:475;
top:117px;
margin-left: 0 !important;
background-image: url(http://i2.photobucket.com/albums/y4/paraparasatoko/nav.png);
background-repeat: repeat;
border: 1px solid;
z-index: 2;
}


</style>
</head>
<body>
<div class="box" id="boxContainer">
<div class="box" id="boxContent" style="background-image: url(http://i2.photobucket.com/albums/y4/paraparasatoko/headercrop2.png); background-repeat:no-repeat;">
<div "box" id="nav">
<p>Insert links here.</p>
</div>
<div class="box" id="text" style="background-color:ffffff;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla rutrum posuere mi. Praesent sit amet mauris. Maecenas non erat sit amet felis vehicula pretium. Praesent orci. Sed in metus sed turpis dictum vulputate. Duis dignissim mollis nibh. Ut ac ante in justo adipiscing accumsan. Etiam ligula. Cras eleifend, nibh eget luctus tincidunt, metus urna eleifend felis, non euismod enim odio id augue. Duis condimentum. Maecenas placerat mauris at nibh.</p>
<p>Ut nisl est, varius vitae, porta nec, volutpat ac, leo. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent posuere. Donec rhoncus. Vestibulum lectus lectus, facilisis nec, porta id, hendrerit nec, ante. Pellentesque ut tortor vitae massa pellentesque lacinia. Aliquam bibendum. Aenean nec enim eu est sagittis egestas. Ut non erat eu turpis rutrum accumsan.</p>
<p>In vestibulum felis et mauris. Curabitur posuere arcu sed orci. Vestibulum faucibus, arcu in tempus vulputate, lorem velit auctor orci, vitae viverra turpis dui in metus. Nunc semper rutrum risus. Maecenas scelerisque metus eget eros. Morbi porta quam eget enim. Ut pharetra volutpat ipsum. Sed sit amet ante. Praesent ullamcorper. Nullam suscipit eleifend odio. Vestibulum massa mauris, faucibus vel, scelerisque suscipit, vehicula vitae, metus. Fusce varius. Donec non purus. Praesent feugiat mauris in nulla. Sed leo. Aenean id nibh. Proin cursus eleifend turpis.</p>
<p>In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam suscipit pharetra mi. Ut lorem magna, facilisis et, posuere at, tristique nec, arcu. Nunc tempor molestie diam. Aenean erat leo, vestibulum eleifend, cursus vitae, vehicula at, ipsum. Donec tempus. Maecenas neque ipsum, sollicitudin ut, laoreet ultricies, sagittis in, orci. Suspendisse volutpat dignissim leo. Fusce pulvinar massa non massa. Nam a lorem quis ipsum aliquam hendrerit. Aliquam erat volutpat. Cras odio urna, porttitor non, bibendum tempor, pharetra id, augue. Suspendisse enim dolor, fermentum eu, posuere quis, nonummy at, nulla. Nunc fermentum. Morbi eget nunc.</p>
<p>Fusce mi lectus, euismod a, vulputate et, luctus at, enim. Proin pretium neque nec mauris condimentum eleifend. Mauris mattis, sem nec condimentum interdum, leo purus gravida metus, sit amet ullamcorper velit velit eget lorem. Morbi nec nunc ut orci feugiat feugiat. Vivamus fermentum, nisi id congue commodo, mauris neque feugiat sapien, nec euismod enim est sit amet mauris. Curabitur blandit sodales quam. Aenean gravida fringilla lorem. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin bibendum, nibh nec auctor molestie, nunc tortor commodo magna, id accumsan ipsum augue nec arcu. Maecenas dignissim magna vitae augue. Sed non tellus. Praesent pulvinar, nunc vitae hendrerit sodales, ligula purus luctus arcu, pellentesque dignissim lorem sapien a arcu. Mauris vitae enim at nibh convallis condimentum. Vivamus sagittis hendrerit quam. Nam blandit purus eu ante.</p>
<p>Fusce mi lectus, euismod a, vulputate et, luctus at, enim. Proin pretium neque nec mauris condimentum eleifend. Mauris mattis, sem nec condimentum interdum, leo purus gravida metus, sit amet ullamcorper velit velit eget lorem. Morbi nec nunc ut orci feugiat feugiat. Vivamus fermentum, nisi id congue commodo, mauris neque feugiat sapien, nec euismod enim est sit amet mauris. Curabitur blandit sodales quam. Aenean gravida fringilla lorem. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin bibendum, nibh nec auctor molestie, nunc tortor commodo magna, id accumsan ipsum augue nec arcu. Maecenas dignissim magna vitae augue. Sed non tellus. Praesent pulvinar, nunc vitae hendrerit sodales, ligula purus luctus arcu, pellentesque dignissim lorem sapien a arcu. Mauris vitae enim at nibh convallis condimentum. Vivamus sagittis hendrerit quam. Nam blandit purus eu ante.</p>
</div>

</div>
</div>
</body>
</html>
djr33
12-14-2006, 04:35 AM
Why can't there be one perfect browser for everyone to use so I don't have to figure out the coding differences between the two?Well, that's not right. It's that Mozilla IS better in so many ways, but too many ignorant people just go with IE 'cause they don't know any better and Microsoft tells them to.
mwinter
12-14-2006, 09:41 PM
Why can't there be one perfect browser for everyone to use so I don't have to figure out the coding differences between the two?

If browsers implemented the specifications that they were supposed to - and did do correctly - it would only be extra features and the interface to worry about. Unfortunately, incomplete and erroneous implementations are abound.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

First, trigger "Standards" mode for those browsers use such a thing. This produces more consistent and predictable behaviour. A Strict document type will do this - there should be little need to use a Transitional type now.



background: #a58b74;
background-image: url(http://i2.photobucket.com/albums/y4/paraparasatoko/bg-2.png);
background-repeat: repeat-x;
background-position: top left;
background-attachment: fixed;

You can combine these into a single declaration (URI omitted for clarity):



background: #a58b74 url(...) repeat-x 0% 0%;

A foreground colour (color property) should be paired with background colours. Do not depend on the visitor having the same default colours as you.



font-size:10px;

10 pixels will be too small for comfort for many people. On small yet high-resolution displays, it will be unreadable. Use percentages. Body text should ideally be left at 100% of the default to accommodate user preferences and display differences.



font-family:vernada;

There is no such font named "vernada". Verdana is generally best avoided, especially if you intend to reduce the font size. It has different metrics to many other fonts and whilst it may be readable at small sizes, replacement fonts will not be at those same dimensions. On the subject of replacements, all font family declarations should include a generic font: not everyone will have the fonts you specify, especially when they are platform-dependent.



text-align: center;

The text-align property, as its name suggests, aligns text and other in-line content within block-level elements. It does not affect block-level elements (except in broken browsers like IE 5.x).

There are lots of resources on the Web that discuss centring block-level elements (http://dorward.me.uk/www/centre/).


I would advise you to carefully check both your markup and style sheet for errors. The validators provided by the W3C, both HTML (http://validator.w3.org/) and CSS (http://jigsaw.w3.org/css-validator/), can help with this task.

Mike
Satoko
12-14-2006, 10:15 PM
Wow, thanks for the detailed reply. I'll fix all of that up.

I'm still not getting the centering down yet. I checked out that site and I added this to my body, but the content is still on the left:



Nevermind, I got it!


Adding it to the specific div elements had no effect either.

Edit: Nevermind, I got the centering down, but I'm having problems with my navigation bar. Instead of staying in the area it's supposed to be in, it's centered with the rest of the content. This only occurs in IE; in Mozilla, it's perfect.
mwinter
12-14-2006, 10:28 PM
Wow, thanks for the detailed reply. I'll fix all of that up.

You're welcome. :)



font-size: 10pt;

The pt (point) unit should be reserved for printing.



min-width: 478px;
margin-left: auto;
margin-right: auto;

As you've only specified a minimum width, the element will continue to expand to fill the containing element. Use the max-width or width property to limit the width. By all means keep the min-width declaration if you want to limit the minimum width.

Mike
Satoko
12-14-2006, 10:37 PM
I had the brilliant idea of just using the center tag. It might be crude, but it's the only thing that's worked so far. My content is perfectly centered, but I'm still having problems. In both Mozilla and IE, my navigation bar is not the height I have specified in the code. In IE in particular, the navigation bar is centered instead of in its proper place to the left of my text area. How frustrating!

Here's an updated version of the code:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Quality Tile</title>
<style type="text/css">
body
{
background: #a58b74 url(http://i2.photobucket.com/albums/y4/paraparasatoko/bg-2.png) repeat-x 0% 0%;
margin-top: 40px;
font-size: 100%;
font-family: Sans Serif;
overflow: auto;
}

a:link
{
color: #ffffff;
font-weight: bold;
background-color: #a58b74;
text-decoration: none;
}

a:active
{
color: #ffffff;
font-weight: bold;
background-color: #a58b74;
text-decoration: none;
}

a:visited
{
color: #ffffff;
font-weight: bold;
background-color: #a58b74;
text-decoration: none;
}

a:hover
{
color: #ffffff;
font-weight: bold;
background-color: #ded8d8;
text-decoration: none;
}

.box
{
width: 604px;
height: 594px;
z-index: 1;
}

#boxContent
{
border: none;
}

#boxContent
{
position: relative;
left: -4px;
top: -4px;
}

#boxContainer
{
position: relative;
background: #666;
margin: 4px;
}

.text
{
background: #ffffff;
position: absolute;
width: 476px;
height: 475px;
left: 126px;
top: 117px;
overflow: auto;
border: 1px solid;
scrollbar-face-color : #ffffff;
scrollbar-highlight-color : #ffffff;
scrollbar-3dlight-color : #ffffff;
scrollbar-shadow-color : #ffffff;
scrollbar-darkshadow-color : #ffffff;
scrollbar-track-color : #ffffff;
scrollbar-arrow-color : #000000;
text-align: left;
z-index: 2;
}

.nav
{
position: absolute;
width:125px;
height:475;
top:117px;
background-image: url(http://i2.photobucket.com/albums/y4/paraparasatoko/nav.png);
background-repeat: repeat;
border: 1px solid;
z-index: 2;
}


</style>
</head>
<body>
<center>
<div class="box" id="boxContainer">
<div class="box" id="boxContent" style="background-image: url(http://i2.photobucket.com/albums/y4/paraparasatoko/crop.png); background-repeat:no-repeat;">
<div class="nav">
<a href="http://google.com">Test link</a>
</div>
<div class="text" style="background-color:ffffff;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla rutrum posuere mi. Praesent sit amet mauris. Maecenas non erat sit amet felis vehicula pretium. Praesent orci. Sed in metus sed turpis dictum vulputate. Duis dignissim mollis nibh. Ut ac ante in justo adipiscing accumsan. Etiam ligula. Cras eleifend, nibh eget luctus tincidunt, metus urna eleifend felis, non euismod enim odio id augue. Duis condimentum. Maecenas placerat mauris at nibh.</p>
<p>Ut nisl est, varius vitae, porta nec, volutpat ac, leo. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent posuere. Donec rhoncus. Vestibulum lectus lectus, facilisis nec, porta id, hendrerit nec, ante. Pellentesque ut tortor vitae massa pellentesque lacinia. Aliquam bibendum. Aenean nec enim eu est sagittis egestas. Ut non erat eu turpis rutrum accumsan.</p>
<p>In vestibulum felis et mauris. Curabitur posuere arcu sed orci. Vestibulum faucibus, arcu in tempus vulputate, lorem velit auctor orci, vitae viverra turpis dui in metus. Nunc semper rutrum risus. Maecenas scelerisque metus eget eros. Morbi porta quam eget enim. Ut pharetra volutpat ipsum. Sed sit amet ante. Praesent ullamcorper. Nullam suscipit eleifend odio. Vestibulum massa mauris, faucibus vel, scelerisque suscipit, vehicula vitae, metus. Fusce varius. Donec non purus. Praesent feugiat mauris in nulla. Sed leo. Aenean id nibh. Proin cursus eleifend turpis.</p>
<p>In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam suscipit pharetra mi. Ut lorem magna, facilisis et, posuere at, tristique nec, arcu. Nunc tempor molestie diam. Aenean erat leo, vestibulum eleifend, cursus vitae, vehicula at, ipsum. Donec tempus. Maecenas neque ipsum, sollicitudin ut, laoreet ultricies, sagittis in, orci. Suspendisse volutpat dignissim leo. Fusce pulvinar massa non massa. Nam a lorem quis ipsum aliquam hendrerit. Aliquam erat volutpat. Cras odio urna, porttitor non, bibendum tempor, pharetra id, augue. Suspendisse enim dolor, fermentum eu, posuere quis, nonummy at, nulla. Nunc fermentum. Morbi eget nunc.</p>
<p>Fusce mi lectus, euismod a, vulputate et, luctus at, enim. Proin pretium neque nec mauris condimentum eleifend. Mauris mattis, sem nec condimentum interdum, leo purus gravida metus, sit amet ullamcorper velit velit eget lorem. Morbi nec nunc ut orci feugiat feugiat. Vivamus fermentum, nisi id congue commodo, mauris neque feugiat sapien, nec euismod enim est sit amet mauris. Curabitur blandit sodales quam. Aenean gravida fringilla lorem. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin bibendum, nibh nec auctor molestie, nunc tortor commodo magna, id accumsan ipsum augue nec arcu. Maecenas dignissim magna vitae augue. Sed non tellus. Praesent pulvinar, nunc vitae hendrerit sodales, ligula purus luctus arcu, pellentesque dignissim lorem sapien a arcu. Mauris vitae enim at nibh convallis condimentum. Vivamus sagittis hendrerit quam. Nam blandit purus eu ante.</p>
<p>Fusce mi lectus, euismod a, vulputate et, luctus at, enim. Proin pretium neque nec mauris condimentum eleifend. Mauris mattis, sem nec condimentum interdum, leo purus gravida metus, sit amet ullamcorper velit velit eget lorem. Morbi nec nunc ut orci feugiat feugiat. Vivamus fermentum, nisi id congue commodo, mauris neque feugiat sapien, nec euismod enim est sit amet mauris. Curabitur blandit sodales quam. Aenean gravida fringilla lorem. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin bibendum, nibh nec auctor molestie, nunc tortor commodo magna, id accumsan ipsum augue nec arcu. Maecenas dignissim magna vitae augue. Sed non tellus. Praesent pulvinar, nunc vitae hendrerit sodales, ligula purus luctus arcu, pellentesque dignissim lorem sapien a arcu. Mauris vitae enim at nibh convallis condimentum. Vivamus sagittis hendrerit quam. Nam blandit purus eu ante.</p>
</div>

</div>
</div>
</center>
</body>
</html>
Satoko
12-14-2006, 10:42 PM
Aha! I finally figured it all out and it's working wonderfully. Thanks for the help! :) Mods, you can lock this if you'd like.
mwinter
12-14-2006, 11:19 PM
I had the brilliant idea of just using the center tag. It might be crude, but it's the only thing that's worked so far.

There really is nothing that the center element can do that CSS can't.



In both Mozilla and IE, my navigation bar is not the height I have specified in the code.

As I wrote, you needed to examine your markup and style sheets. For example, in the .nav rule, you have a height declaration that doesn't have a unit in the value. This is illegal for non-zero lengths.



In IE in particular, the navigation bar is centered instead of in its proper place to the left of my text area. How frustrating!

Add a left box offset property with the value 0 ("left: 0;"). You should also be able to remove the offset properties in the #boxContent rule.

Mike
mwinter
12-15-2006, 12:13 AM
scrollbar-face-color : #ffffff;
scrollbar-highlight-color : #ffffff;
scrollbar-3dlight-color : #ffffff;
scrollbar-shadow-color : #ffffff;
scrollbar-darkshadow-color : #ffffff;
scrollbar-track-color : #ffffff;
scrollbar-arrow-color : #000000;

By the way, that isn't very friendly. The thumb or scroll box is an important part of the scrollbar, as are the borders of it and the buttons. Please, do users a favour and leave the chrome alone.

Mike