PDA

Click to See Complete Forum and Search --> : Well, this confused me...

kempy
01-21-2010, 08:41 AM
My friend Ryan knocked up this ruff design for his college coursework website. He used absolute positioning in the first instance and this completely broke his website. I then completely revamped the page, using margins etc. The design is ok, for now, however, the links on the left hand side, use hover styles. This works fine in Firefox, however, as normal, IE finds a big big big problem with this. It's a bigger problem than I thought in the first place, as the top link reacts as it should when rolled over with the mouse, but the links below it with exactly the same classes etc, do not. I don't know whether or not any body has had any trouble with this before, but it's bugging Ryan and I, we've even had a few fresh pairs of eyes look at the code too and now it's bugging them... Below you will find index.html and style.css. If anybody could figger out why these do not work in IE, except for the top link... That would be very much appriciated. Cheers!! =D

By the way, the design is really only a ruff mock up, so don't complain to me how the design is rubbish or whatever. :P

index.html

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Foremost 2000</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="title">
<h1 align="left" class="style1">Foremost 2000</h1>
</div>
<div id="body">
<div id="links">
<p class="style2"><a href="windows.html" class="navlinks">Windows</a></p>
<p class="style2"><a href="quotations.html" class="navlinks">Quotations</a></p>
<p class="style2"><a href="ordering.html" class="navlinks">Ordering</a></p>
<p class="style2"><a href="expectations.html" class="navlinks">Expectations</a></p>
<p class="style2"><a href="faq.html" class="navlinks">FAQ</a></p>
<p class="style2"><a href="contactus.html" class="navlinks">Contact Us</a> </p>
</div>
<div class="style3" id="bodycontent">
<p>Welcome to Foremost <a href="#" class="bodylinks">2000!</a> </p>
<p>&nbsp;</p>
</div>
<div class="style4" id="footer">
&copy; 2009 FOREMOST 2000. All Rights Reserved
</div>
</div>
</body>

</html>


style.css

/* CSS Document */

body {
/*margin-left: 147px;
margin-right: 147px;*/
background-color: #009900;
}
#body {
margin-left: 17%;
margin-right: 17%;
}
#title {
margin-left: 17%;
}

/* Layers */
#links {

}
#bodycontent {
margin-top: -231px;
margin-left: 200px;
}
#footer {
margin-top: 0px;
margin-left: 200px;
}

/* Links */
a.navlinks {
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 18px;
}
a.navlinks:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #99CCFF;
/*font-size: 19px;*/
font-weight: 500;
}
a.bodylinks {
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-side: 12px;
text-decoration: none;
}
a.bodylinks:hover {

}

/* Styles */
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: bold;
color: #FFFFFF;
font-size: 40px;
}
.style2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 17px;
}
.style3 {
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
}

Cheers.
kempy
01-21-2010, 08:43 AM
Also, I have already tried taking out the Paragraph tags to makes all of the links in the same paragraph use line breaks to seperate the links. Once again, IE wastes time...
kempy
01-21-2010, 08:50 AM
Oh and that's IE 7, 'cause the college hasn't updated it... =D
claytonseo
01-21-2010, 08:56 AM
try this

#links a {color: #FFFFFF; text-decoration:none;}
#links a:visited {color: #FFFFFF; text-decoration:none;}
#links a:hover {color: #FFFFFF; text-decoration:underline;}

remove the <p> tags, and remove the class in the <a> tags, its too nested. just put <br/> after each <a>.
kempy
01-21-2010, 09:43 AM
Well, the only problem with that is the fact that there are two different sets of links...
kempy
01-21-2010, 09:44 AM
Being, the nav links, then the links in the body within the body text...
claytonseo
01-22-2010, 12:54 AM
ok

try this:get the 4 layer structure

<div id="container">

<div class="header">

</div>

<div class="midcontent">

</div>

<div class="footer">

</div>

</div>

.header a

.midcontent a

.footer a


still remove the <p> tags and the <a> classes.

if you are going to have 2 different fonts style e.g in the midcontent layer, surround each font style with a layer.