...

View Full Version : Display issues with the new update of Firefox and IE



wsg4
07-24-2007, 08:08 PM
Hey all,

I am fairly new to CSS, but I have done HTML and Scripting quite frequently in the past, so I am loving what I am learning. However, I must admit that I am having quite a bit of difficulty with the new update of Firefox (2.0.0.5), as well as IE (6 [sorry, I refuse to use 7]).

Basically, I want a centered page inside a div content wrapper and a top nav. bar. Well, everything was looking just GREAT until the new update of Firefox. Now all of my text has been aligned to the left and the nav bar exceeds the header and content wrapper.

Here is my HTML, in which I am still tweaking the internal CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR
/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content-"text/html"; charset=iso-8859-1" />
<meta name="keywords" content="St. Aloysius, LifeTeen, Life Teen, Jesus Christ, Hickory, NC, Catholic, Youth Group" />
<meta name="description" content="St. Aloysius is a parish in Hickory, North Carolina. Lifeteen is a program specially directed towards high school youth and its goal is to lead teens closer to Christ." />
<title>St. Aloysius Lifeteen | Leading Teens Closer to Christ</title>
<style type="text/css">
@import url(styles.css);

.sidebar{
width:200px;
height: 70%;
float:right;
margin:10px;
margin-top:5px;
border: solid 2px #2892d7;
padding: 10px;
overflow:auto;
}
.sidebar h3{
color:#666;
font-size:.95em;
letter-spacing:-1px;
font-family: "Helvetica", "Verdana", Arial, sans-serif;
margin:0;
text-align:center;
background:#a5d5f4;
}
.sidebar p{
font-size:.8em;
margin: 5px;
}
.copyright{
font-size:.8em;
font-style:italic;
margin-top:25%;
float:bottom;
text-align:center;
}
</style>
</head>
<body class="bg">
<div id="wrapper">
<img alt="St. Aloysius Lifeteen" img src="images/stal_head3.jpg"/>

<ul class="nav">
<li><a href="index.html">Home </a></li>
<li><a href="about.html">About </a></li>
<li><a href=#>Calendar </a></li>
<li><a href=#>Photos </a></li>
<li><a href=#>Forum </a></li>
</ul>
<br><br>

<div class="sidebar">
<h3>From the Youth Minister</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla faci.</p>
<br>
<h3>Have You Heard?</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla faci.</p>
</div>

<h2>Welcome to St. Aloysius Lifeteen</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla faci</p>

<h2>Things you Need to Know</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla faci</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla faci</p>

<h2>Where We Are Located</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla faci</p>
<div class="copyright">
Copyright 2007 St. Aloysius Catholic Church
</div>
</body>
</div>
</html>

And my external CSS for the nav bar, etc:


body{
background: url(images/stripe4_bg.jpg);
background-repeat:repeat-x;
background-position:top left;
}

ul.nav{
margin-left:0px;
margin-top:-5px;
padding-right:5px;
list-style:none;
border: 1px solid #000;
float:left;
width:98%;
background: url(images/nav_bg.jpg) repeat-x left top;
}
ul.nav li{
float:left;
}
ul.nav a{
display:block;
padding: 5px 15px 5px 15px;
border-right:1px solid #000;
margin-right: 5px;
font-family:"Century Gothic";
font-weight:bold;
font-variant: small-caps;
text-align:center;
text-decoration:none;
color:#000;
}
ul.nav a:hover{
background:#ff954f;
}

h2{
color:#666;
font-family: "Helvetica", "Verdana", Arial, sans-serif;
font-size:1em;
letter-spacing:-1px;
line-height: 100%;
margin-bottom:0px;
margin-top:23.5px;
border-bottom: solid 2px #2892d7;
overflow: hidden;
zoom:1;
}

p{
margin-top:0;
margin-bottom:10px;
color:#000;
font-family:Verdana, Arial, sans-serif;
font-size:.8em;
overflow:hidden;

}

#wrapper{
width:800px;
height:830px;
margin: 0 auto;
padding: 0 8px 15px 15px;
border: 1px solid #666666;
background:url(images/body_bg.jpg);
}

Knowing me, it is probably a very simple solution that I just looked over in my haste. If someone could possibly offer their help I would be GREATLY appreciative.

_Aerospace_Eng_
07-24-2007, 11:55 PM
Add this to your CSS

* {
margin:0;
padding:0;
}
You may want to validate your document. http://validator.w3.org

wsg4
07-25-2007, 01:14 AM
Oh wow I feel like a moron. That solved the problem immediately! Thank you so much - you certainly live up to the "Supreme Coder" ranking. Now, could you explain to me WHY this worked? As happy as I am to know WHAT I fixed, I would love to learn the "why" as well.

Thanks again!

_Aerospace_Eng_
07-25-2007, 01:42 AM
Well browsers have default margins/padding on some elements. This varies among browsers. Using the universal select * will make all margins and padding on all elements 0. This is gives you a better starting point in cross browser CSS. Now you just have to manually add in padding/margin where needed.

wsg4
07-25-2007, 02:09 AM
Excellent. Seems to make sense. So is that "kosher" for me to have a universal selector in my CSS in professional web design?

And, as a matter of fact, I have yet ANOTHER problem. As you can see in my code, I have a nice little sidebar that is floated to the right side of my page. Now, I want to put a small image in that sidebar that is floated to the right.

The code I would use in the internal CSS:



.sidebar img{
float:right;
}


And then just put the image in the HTML. The problem comes, yet again, with Firefox. The problem seems just fine in IE, and the text actually wraps around the image. In Firefox, the text wraps...but the browser seems to read the img as if the height is that of the first paragraph, so the text gets spread very far down my sidebar and forces a scrollbar in my sidebar (which is supposed to happen if the text exceeds my preset height of the sidebar). Does that make sense? I could post an image if that would help.

_Aerospace_Eng_
07-25-2007, 05:56 AM
No you aren't making sense. You really shouldn't set any heights that you know will have content in them.

wsg4
07-25-2007, 06:23 AM
Well I'm setting the height because it was the only way to keep the sidebar from extending beyond my content wrapper - but that does not matter. Here is the problem I'm talking about:

In Firefox:
http://img.photobucket.com/albums/v173/InFlames/ff_side.jpg

In IE:
http://img.photobucket.com/albums/v173/InFlames/ie_side.jpg

As you can see, the same code turns out differently in Firefox. In IE, the content wraps around my floated image (yes I am aware about the padding). I cannot figure out what would be so different between Firefox and IE to not let the content wrap around the image in a sidebar...

_Aerospace_Eng_
07-25-2007, 06:24 AM
Post a link to your site.

wsg4
07-25-2007, 04:29 PM
Sorry, but I have not published my site yet.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum