- This topic is empty.
-
AuthorPosts
-
June 9, 2012 at 6:42 am #38444samborineMember
Hi,
I have an extra div appearing in ie9. The address is http://www.pclean.com.au/contact-us.html
at the bottom of the left navigation in ie9 there is a thin button appearing. It does not happen in firefox 12.0. when i investiagated it with webdeveloper it seemed that the div above ( current) was inserted twice. but it isn’t in the code. I’ve put inb the proper doc type and tried to validate the code, but i don’t understand the errors that are being returned. as far as i can see the validation is wrong, so i’m assuming that it isn’t and i have no idea whats happening.If someone could help me with this just once, i’m a quick learner and wouldn’t need help again.
HTML
"http://www.w3.org/TR/html4/strict.dtd">
Contact Us
Pressure Cleaning Sales and Service-Contact Us
Contact us
Peter Linton: 0408 580 000Fax : 07 3395 8458
CSS
body{
background:#fff;
font-family: "Times New Roman", Times, serif;
font-size:15px;
color:#333;
}
#wrapper{
position:relative;
width:960px;
margin:0 auto;
}
#header{
position:relative;
margin:0 0px 0 -30px ;
width:960px;
padding:20px 0px 30px 0;
height:50px
}
#box{
position:relative;
top: 90px;
padding:20px 10px 40px 10px;
width:885px;
margin: 0px 0px 0 6px;
border-radius: 30px;
border:20px solid #ee1c25;
background-color:#FFFFFF;
min-height: 800px;
}
h1{
font-size:20px;
font-weight:bold;
text-decoration:underline;
}
h2{font-size:15px;
font-weight:bold;
text-decoration:none;
}
h2{font-size:20px;
font-weight:normal;
text-decoration:none;
}
.nav a:link{
display:block;
font-family: georgia, "Times New Roman", Times, serif;
font-weight:bold;
font-size:15px;
color:#fef200;
background-color:#ee1c25;
width:120px;
border-radius: 30px;
text-align:center;
border:1px solid #000;
padding:4px;
margin: 10px 0 10px 0 ;
text-decoration:none;
min-width:240px;
}
.nav a:hover{
color:#ee1c25;
background-color:#fef200;
display:block;
font-family: georgia, "Times New Roman", Times, serif;
font-weight:bold;
font-size:15px;
width:120px;
border-radius: 30px;
text-align:center;
border:1px solid #000;
padding:4px;
margin: 10px 0 10px 0 ;
text-decoration:none;
min-width:240px;}
.nav a:active{
color:#ee1c25;
background-color:#fef200;
display:block;
font-family: georgia, "Times New Roman", Times, serif;
font-weight:bold;
font-size:15px;
width:120px;
border-radius: 30px;
text-align:center;
border:1px solid #000;
padding:4px;
margin: 10px 0 10px 0 ;
text-decoration:none;
min-width:240px;}
.nav a:visited:hover{
color:#ee1c25;
background-color:#fef200;
border:1px solid #000;
}
.nav a:visited{color:#fef200;
background-color:#ee1c25;
border:1px solid #000;}
.current a:link,.current a:visited, .current a:hover, .current a:active{color:#ee1c25;
background-color:#fef200;
border:1px solid #000;}
.back{
clear:right;
}
#box .back a:link{
display:block;
font-family: georgia, "Times New Roman", Times, serif;
font-weight:bold;
font-size:15px;
color:#fef200;
background-color:#ee1c25 ;
max-width:80px;
border-radius: 30px;
text-align:center;
border:1px solid #000;
padding:4px;
margin: 10px 0 10px 500px ;
text-decoration:none;
}
#box .back a:visited{
display:block;
font-family: georgia, "Times New Roman", Times, serif;
font-weight:bold;
font-size:15px;
color:#fef200;
background-color:#ee1c25 ;
max-width:80px;
border-radius: 30px;
text-align:center;
border:1px solid #000;
padding:4px;
margin: 10px 0 10px 500px ;
text-decoration:none;
}
#box .back a:hover{
display:block;
font-family: georgia, "Times New Roman", Times, serif;
font-weight:bold;
font-size:15px;
color:#ee1c25 ;
background-color:#fef200;
max-width:80px;
border-radius: 30px;
text-align:center;
border:1px solid #000;
padding:4px;
margin: 10px 0 10px 500px ;
text-decoration:none;
}
#box .back a:active{
display:block;
font-family: georgia, "Times New Roman", Times, serif;
font-weight:bold;
font-size:15px;
color:#ee1c25 ;
background-color:#fef200;
max-width:80px;
border-radius: 30px;
text-align:center;
border:1px solid #000;
padding:4px;
margin: 10px 0 10px 500px ;
text-decoration:none;
}
.left{
width: 25%;
padding: 10px;
float:left;
}
June 9, 2012 at 10:22 am #104143Paulie_DMemberThere is something really odd in there.
You have an element
which is not a valid element in html (AFAIK). i don’t know if that us causing issues.
I don’t know how the ‘current’ divs are being inserted either with JS or hard coded but I would have constructed the nav as an unordered list and then applied a class of ‘current’ to the appropriate link.
June 9, 2012 at 10:28 am #104144Paulie_DMemberAlso, your link items have a set width of 120px AND a min-width of 240px but again, I don’t know if that is the issue.
I’m guessing that there is a confused margin, width &/or padding issue going on here.
There is an awful lot of repetition in your css and that makes it hard to go through.
June 9, 2012 at 12:06 pm #104149samborineMemberYeah i know. its my first site and im still learning what can and can’t be cut out. thanks for your help. ill get rid of the center ect and see what happens. ill try and shorten the css while im at it
June 9, 2012 at 12:24 pm #104152Paulie_DMemberTo be honest, you’re better off starting with a good reset/normalise css file and, perhaps a grid system.
That will eliminate a lot of the positioning and margin settings you seem to have going on.
There are a lot of options out there. HTML boilerplate will have a lot of what you need and I highly recommend the 960 grid system (from 960.gs) although the others have their own preference for grid systems.
If you’re not familiar with a grid system or perhaps some of the basics I also recommend checking out a couple of video series from net-tuts.
1. http://net.tutsplus.com/sessions/web-design-from-scratch/
2. http://net.tutsplus.com/sessions/photoshop-to-html/The first is quite basic but has some useful stuff that we often overlook while the second has a useful section on the 960 grid system.
June 10, 2012 at 1:26 am #104167samborineMemberAwesome thanks for your help. I’ll persevere for today but if i cant get it working then i guess i’ll have to start from scratch.
Removing theand the contradictory widths did nothing unfortunately. June 10, 2012 at 2:13 am #104170samborineMemberI’ll try re coding as a ul
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.