Weird Stuff Happening in diff. browsers

Tricia

02-25-2005, 04:44 PM

So I've got this page with the following CSS and HTML:

body {
display: block;
width: 800px;
margin-left: auto;
margin-right: auto;
font-family: arial, helvetica, sans-serif;
font-size: 14px;
background: url(diamondsbck.gif);
border: 2px #003366 double;
margin-top: 10px;
}

a {
color: #6699CC;
text-decoration: none;
}
/*
a:hover {
color: #979BB7;
text-decoration: underline;
}

a:visited {
color: #BEBEBE;
text-decoration: none;
}*/

/*Header Section*/

#header {
background-color: #FFFFFF;
margin: 0;
height: 42px;
padding-top: 5px;
clear: both;
position: relative;
}

/*Site Map*/
#head2 {
text-align: left;
position: absolute;
right: 1%;
padding-top: 2.5%;
}

/*--End Search Area*/

/*Logo Placement*/

#head1 {
height: 42px;
}

#logo {
background-color: #FFFFFF;
}
/*--End Logo Placement*/

#topmenu {
width: 800px;
bottom: 0;
background-color: #003366;

}

#topmenu ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
background-color: #003366;

}

#topmenu li { /* all list items */
float: left;
position: relative;
width: 114.2857px;
background-color: #003366;
}

#topmenu li ul { /* second-level lists */
display: none;
position: absolute;
left: 0;
font-size: 85%;
background-color: #003366;
bottom: 24px;
/*text-align: left;*/
/*top: 24px;*/

}

#topmenu li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}

#topmenu li a {text-decoration: none;
display: block;
color: #FFFFFF;
background-color: #003366;
padding: 5px;
text-align: center;
}

#topmenu li a:hover {text-decoration: none;
color: #003366;
background-color: #D4E2F6;
text-align: center;
}
/*
li a:active {text-decoration: none;
color: #FFFFFF;
background-color: #003366;
}
*/

#topmenu li:hover ul, li.over ul { /* lists nested under hovered list items
*/
display: block;
text-decoration: none;
color: #003366;
background-color: #D4E2F6;
text-align: left;
top: 24px;

}

/*--End Top Navigation*/

#imagestrip {
border-style: double;
border-width: 0 0 2px 0;
border-color: #003366;
margin: 0;
}
/*--End Header Area*/

/*Center Content Area*/

#center {
background-image: url(diamond.jpg);
background-position: bottom right;
background-repeat: no-repeat;
background-color: #FFFFFF;
border-top: #003366;

}

#content {
font-size: 98%;
line-height: 18px;
margin-left: 20%;
/*width: 60%;*/
padding: 2%;
}

/*Bottom Nav Area*/
#botmenu {

width: 800px;
bottom: 0;
background-color: #003366;

}

#botmenu ul {
padding: 0;
margin: 0;
list-style: none;
background-color: #003366;

}

#botmenu li {
float: left;
position: relative;
width: 160px;
border: #003366;

}

#botmenu li ul { /* second-level lists */
display: none;
position: absolute;
left: 0;
font-size: 90%;
background-color: #003366;
text-align: left;
bottom: 24px;
}

#botmenu li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}

#botmenu li:hover ul, li.over ul { /* lists nested under hovered list items
*/
display: block;
text-decoration: none;
color: #003366;
background-color: #D4E2F6;
bottom: 24px;

}

#botmenu li a {text-decoration: none;
display: block;
color: #FFFFFF;
background-color: #003366;
padding: 5px;
text-align: center;
}

#botmenu li a:hover {text-decoration: none;
color: #003366;
background-color: #D4E2F6;
}
/*
li a:active {text-decoration: none;
color: #FFFFFF;
background-color: #003366;
}
*/

/*--End Bottom Nav Area*/

html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"
/>
<title>Company Name</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="JavaScript" type="text/javascript" src="stuff.js"></script>
</head>
<body>
<div id="header">
<span id="head1">
<img src="logo.jpg" id="logo" width="65" height="38" border="0" alt="Our Logo" />
</span>
<span id="head2"><a href="#">Site Map</a>
</span>
</div>
<div id="topmenu">
<ul id="topnav">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a>
<ul>
<li><a href="#">At A Glance</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Leadership</a></li>
<li><a href="#">Corporate Council</a></li>
<li><a href="#">Culture</a></li>
</ul>
</li>
<li><a href="#">Solutions</a>
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">IT</a></li>
</ul>
</li>
<li><a href="#">Partners</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
</ul>
</li>
<li><a href="#">Careers</a>
<ul>
<li><a href="#">Employee Perspective</a></li>
<li><a href="#">Benefits</a></li>
<li><a href="#">Opportunities</a></li>
</ul>
</li>
<li><a href="#">News</a>
<ul>
<li><a href="#">Press Releases</a></li>
<li><a href="#">Press Coverage</a></li>
<li><a href="#">Photo Gallery</a></li>
</ul>
</li>
<li><a href="#">Locations</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
</ul>
</div>
<div id="imagestrip"><img name="banner" src="img0.gif" width="800" height="127" border="0" alt="Making It Happen Since 1987" /></div>
<div id="center">
<div id="content">
<p>

</p>
<p>
</p>
</div>
</div>
<div id="botmenu">
<ul id="botnav">
<li><a href="#">Link</a>
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Donate</a></li>
<li><a href="#">About US</a></li>
<li><a href="#">About Them</a></li>
<li><a href="#">At A Glance</a></li>
</ul>
</li>
<li><a href="#">Community Relations</a></li>
<li><a href="#">Employee Area</a></li>
<li><a href="#">Client Area</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="footer"> All rights reserved.
</div>

</body>
</html>

Im running into a couple of weird things that I cant seem to figure out:

1. When viewed in firefox the background shows up behind the top menu in little slits. If you were to resize the window, the locations of the strange slits change. These do not appear in IE 6.0 (Not worrying about IE 5.5)

2. Top of website is logo and Site Map Link. Want Site Map link to be aligned all the way to the Right and in the Center of the div...any ideas?

3. In IE 6.0 there is a strange space below the banner image and the border of it - where is that coming from? How do I fix?

Thanks for any help you can provide!

rmedek

02-25-2005, 09:41 PM

I'll pick one.

To get the site map on the right, add "position: relative;" to #header and "position: absolute; right: 0;" to #head2. This places #head2 absolutely within #header. You can adjust the position any way you want (top, bottom, left, right).

I don't see your "slit" problem in FF (on OSX) but I noticed that this:

li { /* all list items */
float: left;
position: relative;
width: 114.2857px;
background-color: #003366;
}

is playing havoc with some things. Getting a little specific there, eh?

Onr more thing, if you're not worried about IE 5, then why do you have a hack for it built into your body declaration?

body {
display: block;
width: 800px;
margin-left: auto;
margin-right: auto;
font-family: arial, sans-serif;
font-size: 12px;
background: url(diamondsbck.gif);
voice-family: "\"}\"";
voice-family:inherit;
border: 2px double #003366;
margin-top: 10px;
}

I'm not sure what that's supposed to do here... off topic, yes, but I'm just curious.

Anyways, you might also want to check out a little forum rule #2 (http://www.codingforums.com/postguide.htm) while you're here.

Hope this helps,

Tricia

02-28-2005, 11:48 AM

I don't see your "slit" problem in FF (on OSX) but I noticed that this:

li { /* all list items */
float: left;
position: relative;
width: 114.2857px;
background-color: #003366;
}

is playing havoc with some things. Getting a little specific there, eh?

If you have a better suggestion, Im all ears. It was the only way I could get the menu to span across the body perfectly. I am a newbie, so please forgive me.

The hack is there because I just found out I dont have to worry about IE 5.5 anymore, hadnt gotten a chance to delete it.

Regarding the forum rule, I will post each question I have separately next time. Just thought because I had a number of questions... well anyway. sorry.

BTW, how come I cannot edit my original post? I need to take the website url off. Was going to post relevant code instead - to avoid getting my hand slapped for that one too ;)

ronaldb66

02-28-2005, 12:33 PM

This isn't about hand slapping: we're just trying to iron out the kinks for you, even the ones you hadn't spotted yet.
Richard was referring to the descriptive subject rule: the more the subject tells about the problems at hand, the better the chance of getting answers and the more valuable the thread will be lateron in searches. Although I must admit I would have a hard time coming up with a much more descriptive title... :o

About your questions:

Using IE6.0, I didn't notice any slits, but couldn't you set a background color on the ul itself to block any underlying stuff out?

Abs pos as Richard suggested, or float right and use margins / padding to center vertically.

I didn't go over your CSS in every detail, but make sure you have set all margins and padding on the containing div to zero, and try giving it an explicit height, equal to the image's height. If that fails, set the div end tag on the same line as the img element, with no white space in between.

Also, you top menu list would gain a lot of maintainability if all the list items were not on the same line, and some of your markup is not very semantic; why use:
<div class="para"> when:
<p> would do perfectly well?

Tricia

02-28-2005, 02:15 PM

You are the best! It works!

Using IE6.0, I didn't notice any slits, but couldn't you set a background color on the ul itself to block any underlying stuff out?

tried that but the slits are still showing up. They dont show up in IE, but they do in FF (see attached jpg)

Abs pos as Richard suggested, or float right and use margins / padding to center vertically.

I didn't go over your CSS in every detail, but make sure you have set all margins and padding on the containing div to zero, and try giving it an explicit height, equal to the image's height. If that fails, set the div end tag on the same line as the img element, with no white space in between.

this works perfectly, thanks

Also, you top menu list would gain a lot of maintainability if all the list items were not on the same line, and some of your markup is not very semantic; why use:
<div class="para"> when:
<p> would do perfectly well?

You are absolutely right, made the changes.

New Question:
Any ideas how to left align the links in my drop-down menus?
Also, I need to designate the li/uls im using for the nav specifically for the nav or if/when i need a list in my content its going to be all hosed up. The specific code that is "general" and applies to both navs currently is:

ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
background-color: #003366;
}

li { /* all list items */
float: left;
position: relative;
width: 114.2857px;
background-color: #003366;
}

li ul { /* second-level lists */
display: none;
position: absolute;
left: 0;
font-size: 85%;
}

li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}

li a {text-decoration: none;
display: block;
color: #FFFFFF;
background-color: #003366;
padding: 5px;
text-align: center;
}

li a:hover {text-decoration: none;
color: #003366;
background-color: #D4E2F6;
}

I can specify the top nav by adding a #topnav to all the above code but when i duplicate it and add #botnav so the properties also affect the bottom menu the menus stop working all together :(

Thanks for the help!
:thumbsup:

Also, I really need to take the website URL off my original post...can someone help?

One more thing, I finally convinced my supervisor to approve our website to not be compatible with IE 5.5 only because I cant figure out how to fix it to save my life. Anyone have any ideas? Think it is still important to be compatible with IE 5.5 if possible. Thanks

ronaldb66

02-28-2005, 03:15 PM

Any ideas how to left align the links in my drop-down menus
If you mean aligning the text to the left: you currently have "text-align: center;" specified for "li a"; take it offf, or replace it with "text-align: left;" and you should be good.
I have no idea why adding an id selector throws everything off; that would require some serious digging in the actual markup and styles.

You should be able to edit you own post with the "edit" button in the bottom right, but maybe editing is restricted for the first, opening post in a thread. I'll ask the administrator or a moderator if they can shed some light on the matter.

On another note: why do you want to remove that link so desperately, other then it being the wrong one? Having an online page to look at is by far the most helpful information, and we really aren't in the game for bashing you.
By the way: the list formatting looks great! :thumbsup:

A little birdy whispered this one in my ear:
http://www.codingforums.com/showthread.php?t=53304

rmedek

03-01-2005, 06:30 AM

Hey Trisha,

What Ronald said. I apologize if I seemed "hand-slappy." :D

About the "slits," I see what you mean now. I also see that you're trying to avoid them by placing a background-color on the <ul>, which should work, because the <ul> encloses the <li>s, meaning any extra space will be filled by the background color...

...except you're floating the <li>s to get them positioned horizontally, which places them out of flow, so the <ul> doesn't actually enclose them. If you place a border on the <ul> you'll see what I mean.

I got rid of the "slits" by adding a little clearing content to the <ul> (doesn't work in IE, which is perfect, since IE doesn't have the problem because it misinterprets the float model). This makes the <ul> expand to enclose the <li>s, and now the background-color hides the spaces:

#topmenu ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
background-color: #003366;
width: 100%;
}

#topmenu ul:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}

Try it out... hopefully it works for you...

Tricia

03-01-2005, 06:15 PM

That did the trick! Thanks so Much! :thumbsup: