PDA

View Full Version : Can't figure this out - ????



pvcblue
Jan 23rd, 2009, 08:55 AM
I have a major problem with my site rendering in FF, there is a space between the header and nav bar that I don't see in IE and can't find a fix!! I have gone over and over the CSS and XHTML and just can't see what would be doing this. Anyone know how to fix it??


Click Here for My Website (http://www.pvcblue.com)

CSS code -


body {
background-color:#0071E1;
background-image: url(images/head.png);
background-repeat: repeat;
margin-top: 25;
margin-bottom: 25;
margin-right: 0px;
margin-left: 0px;
}

/* LAYOUT */

#catbg {
color: #0066CC;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 16px;
height: 25px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
padding-top: 3px;
width: 98%;
}
#catbg1 {
color: #0066CC;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 20px;
height: 25px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
width: 98%;
}
#catbg2 {
color: #009900;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 16px;
height: 45px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
padding-top: 3px;
width: 98%;
}
#catbg3 {
color: #990000;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 16px;
height: 25px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
padding-top: 3px;
width: 98%;
}
#catbg4 {
color: #0066CC;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 16px;
height: 45px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
padding-top: 3px;
width: 98%;
}
/* Surrounding div */

#wrap {
width: 961px;
margin: 0 auto;
padding: 0;
top: auto;
}

/* Surrounding the nav and main content */
#wrapper {
width:925px;
align:center;
background-color:#FFFFFF;
background-image: url(images/newbkZ2.png);
background-repeat: repeat;
vertical-align: top;
border-top: #005FAC;
border-right: thin inset #005FAC;
border-bottom: #005FAC;
border-left: thin outset #005FAC;
height: auto;
padding: 0px;
margin: 0 auto;
}

/* Header surround */
#shad-l {
padding-left: 18px;
background: url(images/shadow-l.png) 0 0 no-repeat;
}

#shad-r {
padding-right: 18px;
background: url(images/shadow-r.png) 100% 0 no-repeat;
}

#header{
position:relative;
height:215px;
overflow:hidden;
background: #FFFFFF url(images/newbkZ2.png) repeat;
top: auto;
width: 925px;
margin: 0 auto;
}
#head-r{height:215px; background:url(./images/head-l.png) 0 0 no-repeat; position:relative}
#head-l{height:215px; background:url(./images/head-r.png) 100% 0 no-repeat; position:relative}
#logo {
display: block;
width: 900px;
height: 215px;
cursor: pointer;
padding-left: 30px;
padding-top: 10px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
position: relative;
background-position: center;
top: auto;
padding-right: 0px;
padding-bottom: 0px;
}



/* Navbar */

#nav {
margin: 0 auto;
width:925px;
height:38px;
font-family:Arial;
font-size:14px;
color:#ffffff;
background-image: url(images/navbg3.jpg);
background-repeat: repeat;
border-right-width: thin;
border-left-width: thin;
border-right-style: inset;
border-left-style: outset;
border-right-color: #005FAC;
border-left-color: #005FAC;
line-height: 1.8em;
font-weight: bold;
}

#navlist li
{
display: inline;
background-repeat: no-repeat;
padding-left: 10px;
}

#navlist a
{
font-weight: bold;
text-transform: none;
text-decoration: none;
font-size: 16px;
line-height:38px;
}

#navlist a:link, #navlist a:visited
{
padding-left: 25px;
color: #FFFFFF;
background: url(images/blue.png) no-repeat 0;}

#navlist a:hover
{
color: #FFFF00;
background-repeat: no-repeat;
background-position: 0;
background-image: url(images/green.png);
padding-left: 25px;
}



/* Main content Area */

#box1 {
margin:10px;
text-align:left;
width:95%;
font-family:Tahoma;
font-size:14px;
color:#0066CC;
padding: 10px;
font-weight: bold;
float: left;
clear: left;
}

#box2 {
text-align:left;
width:95%;
font-family:Tahoma;
font-size:14px;
color:#0066CC;
padding: 10px 30px 10px 20px;
font-weight: bold;
height: auto;
float: left;
clear: left;
}

#box3 {
text-align:center;
width:95%;
font-family:Tahoma;
font-size:14px;
color:#0066CC;
padding: 10px 30px 10px 20px;
font-weight: bold;
height: auto;
float: left;
clear: left;
}

/* Height Gap */

.hg {
margin:0 auto;
height:5px;
}



#footer{
background: url(images/footer-bg.png) repeat-x 100%;
text-align:center;
margin: 0 auto;
font-size:12px;
font-family:Tahoma;
color:#FFFFFF;
position: relative;
height: 130px;
width: 925px;
font-weight: bold;
line-height: 1.2em;
}

/* LINK STYLES */

/* Linkpage links */

a.weblink {
font-family:Arial;
font-size:16px;
text-decoration:none;
color:#0066CC;
font-weight: bold;
}

a.weblink:hover {
font-family:Arial;
font-size:16px;
text-decoration:underline overline;
color:#990000;
font-weight: bold;
}

/* Footer links */

a.footerlink {
font-family:Tahoma;
font-size:11px;
color:#FFFFFF;
text-decoration:none;
}

a.footerlink:hover {
font-family:Tahoma;
font-size:11px;
color:#FFFF00;
text-decoration:none;
}

/* All other links */

a {
font-family:Tahoma;
font-size:11px;
color:#0066CC;
text-decoration:none;
}
a:hover {
text-decoration:overline;
color: #990000;

}
#left {
float: left;
margin: 0;
padding: 20px 20px 0 30px;
width: 300px;
}

#right {
float: right;
margin: 0;
padding: 20px 30px 20px 20px;
width: 400px;
}
/* No image should have a border when linked */

.a img {
border: 0;
}

#bodyarea {
padding: 10px;
margin: 0;
background: #FFFFFF url(images/bodyarea-bg.gif) repeat-x;
font-family: Tahoma;
font-size: 9px;
color: #0066CC;
font-weight: bold;
text-align: right;
}

/* text classes */

.smalltext {
font-size: 10px;
font-family: verdana, sans-serif;
}

.middletext {
line-height: 14px;
}

.normaltext {
font-size: 12px;
}

.largetext {
font-size: 16px;
}

/* lightbox */

#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #FFFFFF; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images2/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images2/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #FFFFFF; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #0066CC;
background-image: url(images/head.png);
}
#overlay[id]{ /* IE6 and below Can't See This */
position:fixed;
}

abduraooft
Jan 23rd, 2009, 09:04 AM
Add
*{margin:0;padding:0;} into your CSS to remove all browser specific margins and paddings from all elements. After that you may set the desired values to the required elements.

pvcblue
Jan 23rd, 2009, 09:07 AM
Add
*{margin:0;padding:0;} into your CSS to remove all browser specific margins and paddings from all elements. After that you may set the desired values to the required elements.

add it where in the CSS ???

abduraooft
Jan 23rd, 2009, 09:26 AM
add it where in the CSS ???
Position doesn't matter, though I'd put it at the beginning.

Arbitrator
Jan 23rd, 2009, 09:27 AM
add it where in the CSS ???The rule with the universal selector (which selects all elements) should go at the top of your primary style sheet. This is a basic technique that you should use frequently.

You might want to also consider:

removing <?xml version="1.0" encoding="iso-8859-1"?> from the start of your source code since it will put Windows Internet Explorer in quirks mode.
fixing errors in your XHTML as shown at http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.pvcblue.com%2F.
fixing errors in your CSS as shown at http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.pvcblue.com%2F.
fixing your code to adhere to Appendix C of the XHTML 1.0 spec since you’re serving your XHTML with an HTML MIME type.
making your code XML compatible since you’re using XHTML (e.g., by not using document.write).

pvcblue
Jan 23rd, 2009, 10:00 AM
Position doesn't matter, though I'd put it at the beginning.

Thank You that worked, all I had to do was go back and put breaks in the pages or margins in my div calls. :thumbsup:

chp2009
Nov 9th, 2009, 04:25 PM
Hey, I really like this site.

What was used to create it..?