Hi -
Some background info:
I'm helping to redesign an internal website at work, and I've decided to use CSS, though I don't really have any experience with it. I figure now's a good time to learn...and what I know right now, I've pretty much learned in the last week or two.
At work, we have access to only two browsers, IE 6.0 and Firefox 2.0, so these are the only two browsers I can test the site in, and they're the only ones that have to work with it.
I am currently experiencing an issue where there's more whitespace in IE than in Firefox. The way it looks in Firefox is the way I want it to look in IE (though, I think I might want to add a little bit more whitespace, but nowhere near as much as in IE). Is there any way I can get them to look the same? Will I have to write two separate css files, one for each browser? I've tried looking at other posts about whitespace issues, but none of them have seemed to address my issue (or fix it).
Since the website is on our intranet, I can't link it, but here's most of the code is pasted below. Since you won't have the images, it will probably be kind of funky, especially since I was trying (and seemed to have succeeded based on what I can see in my browsers) to incorporate CSS tab rollovers as described at http://www.simplebits.com/notebook/2...rollovers.html
HTML:
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title</title>
<link href="css/style4.css" rel="stylesheet " type="text/css" />
</head>
<body>
<div id="wrap">
<div id="header1L" class="header"> <img src="images/logo.jpg" alt="logo" /></div>
<div id="header1R" class="header" align="right">T itle</div>
<div id="navtabs">
<ul id="nav">
<li id="tabout"><a href="/" class="selected ">About Us</a></li>
<li id="tnews"><a href="/news/">News</a></li>
<li id="tpeople">< a href="/people/">People</a></li>
<li id="tprocesses" ><a href="/processes/">Processes </a></li>
<li id="tproducts"> <a href="/products/">Products</a></li>
<li id="tperformanc e"><a href="/performance/">Performan ce</a></li>
<li id="ttools"><a href="/toolslinks/">Tools + Links</a></li>
<li id="tsitemap">< a href="/sitemap/">Site Map</a></li>
</ul>
</div>
<div id="content-wrap">
<div id="content"> CONTENT
</div>
</div>
<div id="footer"> FOOTER
</div>
</div>
</body>
</html>
[/HTML]
CSS:
/* CSS Document */
[CODE=css]
html,
body {
margin:0;
padding:0;
height:100%;
}
#header1L {
width:355px;
height:75px;
float:left;
padding-top:15px;
}
#header1R {
width:355px;
height:75px;
float:right;
padding-top:18px;
}
#navtabs {
position:fixed;
top: 0;
width:710px;
height:100px;
padding-top:75px;
padding-left: 0;
padding-bottom:0px;
padding-right:0;
z-index:10;
}
html>body #wrap {height:100%;}
#wrap {
width:710px;
margin:0 auto;
}
html>body #content-wrap {height:100%;}
html>body #content {
padding:110px 10px;
height:100%;
} /* 110px = height of #header1 +#header2 and #footer + 10px, 10px = give the content some breathing space */
#footer {
width:710px;
height:75px;
}
html>body #footer {
position:fixed;
bottom:0;
z-index:10;
}
#nav {
margin: 0;
padding: 0;
height: 25px;
list-style: none;
display: inline;
overflow: hidden;
}
#nav li {
margin: 0;
padding: 0;
list-style: none;
display: inline;
}
#nav a {
float: left;
padding: 25px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:25px; /* for IE5/Win only */
}
#nav a:hover {
background-position: 0 -25px;
}
#nav a:active, #nav a.selected {
background-position: 0 -50px;
}
#tabout a {
width: 85px;
background:url( ../images/navimg/btnAboutUs.jpg) top left no-repeat;
}
#tnews a {
width: 60px;
background: url(../images/navimg/btnNews.jpg) top left no-repeat;
}
#tpeople a {
width: 75px;
background: url(../images/navimg/btnPeople.jpg) top left no-repeat;
}
#tprocesses a {
width: 95px;
background: url(../images/navimg/btnProcesses.jp g) top left no-repeat;
}
#tproducts a {
width: 85px;
background: url(../images/navimg/btnProducts.jpg ) top left no-repeat;
}
#tperformance a {
width: 105px;
background: url(../images/navimg/btnPerformance. jpg) top left no-repeat;
}
#ttools a {
width: 120px;
background: url(../images/navimg/btnTools.jpg) top left no-repeat;
}
#tsitemap a {
width: 85px;
background: url(../images/navimg/btnSiteMap.jpg) top left no-repeat;
}
[/code]
I've kind of piece-mealed my code together from suggestions I've found on different websites, so I apologize if the code is totally a mess. If anyone has any suggestions to help me out, I'd really appreciate it.
Thanks!
Some background info:
I'm helping to redesign an internal website at work, and I've decided to use CSS, though I don't really have any experience with it. I figure now's a good time to learn...and what I know right now, I've pretty much learned in the last week or two.
At work, we have access to only two browsers, IE 6.0 and Firefox 2.0, so these are the only two browsers I can test the site in, and they're the only ones that have to work with it.
I am currently experiencing an issue where there's more whitespace in IE than in Firefox. The way it looks in Firefox is the way I want it to look in IE (though, I think I might want to add a little bit more whitespace, but nowhere near as much as in IE). Is there any way I can get them to look the same? Will I have to write two separate css files, one for each browser? I've tried looking at other posts about whitespace issues, but none of them have seemed to address my issue (or fix it).
Since the website is on our intranet, I can't link it, but here's most of the code is pasted below. Since you won't have the images, it will probably be kind of funky, especially since I was trying (and seemed to have succeeded based on what I can see in my browsers) to incorporate CSS tab rollovers as described at http://www.simplebits.com/notebook/2...rollovers.html
HTML:
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title</title>
<link href="css/style4.css" rel="stylesheet " type="text/css" />
</head>
<body>
<div id="wrap">
<div id="header1L" class="header"> <img src="images/logo.jpg" alt="logo" /></div>
<div id="header1R" class="header" align="right">T itle</div>
<div id="navtabs">
<ul id="nav">
<li id="tabout"><a href="/" class="selected ">About Us</a></li>
<li id="tnews"><a href="/news/">News</a></li>
<li id="tpeople">< a href="/people/">People</a></li>
<li id="tprocesses" ><a href="/processes/">Processes </a></li>
<li id="tproducts"> <a href="/products/">Products</a></li>
<li id="tperformanc e"><a href="/performance/">Performan ce</a></li>
<li id="ttools"><a href="/toolslinks/">Tools + Links</a></li>
<li id="tsitemap">< a href="/sitemap/">Site Map</a></li>
</ul>
</div>
<div id="content-wrap">
<div id="content"> CONTENT
</div>
</div>
<div id="footer"> FOOTER
</div>
</div>
</body>
</html>
[/HTML]
CSS:
/* CSS Document */
[CODE=css]
html,
body {
margin:0;
padding:0;
height:100%;
}
#header1L {
width:355px;
height:75px;
float:left;
padding-top:15px;
}
#header1R {
width:355px;
height:75px;
float:right;
padding-top:18px;
}
#navtabs {
position:fixed;
top: 0;
width:710px;
height:100px;
padding-top:75px;
padding-left: 0;
padding-bottom:0px;
padding-right:0;
z-index:10;
}
html>body #wrap {height:100%;}
#wrap {
width:710px;
margin:0 auto;
}
html>body #content-wrap {height:100%;}
html>body #content {
padding:110px 10px;
height:100%;
} /* 110px = height of #header1 +#header2 and #footer + 10px, 10px = give the content some breathing space */
#footer {
width:710px;
height:75px;
}
html>body #footer {
position:fixed;
bottom:0;
z-index:10;
}
#nav {
margin: 0;
padding: 0;
height: 25px;
list-style: none;
display: inline;
overflow: hidden;
}
#nav li {
margin: 0;
padding: 0;
list-style: none;
display: inline;
}
#nav a {
float: left;
padding: 25px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:25px; /* for IE5/Win only */
}
#nav a:hover {
background-position: 0 -25px;
}
#nav a:active, #nav a.selected {
background-position: 0 -50px;
}
#tabout a {
width: 85px;
background:url( ../images/navimg/btnAboutUs.jpg) top left no-repeat;
}
#tnews a {
width: 60px;
background: url(../images/navimg/btnNews.jpg) top left no-repeat;
}
#tpeople a {
width: 75px;
background: url(../images/navimg/btnPeople.jpg) top left no-repeat;
}
#tprocesses a {
width: 95px;
background: url(../images/navimg/btnProcesses.jp g) top left no-repeat;
}
#tproducts a {
width: 85px;
background: url(../images/navimg/btnProducts.jpg ) top left no-repeat;
}
#tperformance a {
width: 105px;
background: url(../images/navimg/btnPerformance. jpg) top left no-repeat;
}
#ttools a {
width: 120px;
background: url(../images/navimg/btnTools.jpg) top left no-repeat;
}
#tsitemap a {
width: 85px;
background: url(../images/navimg/btnSiteMap.jpg) top left no-repeat;
}
[/code]
I've kind of piece-mealed my code together from suggestions I've found on different websites, so I apologize if the code is totally a mess. If anyone has any suggestions to help me out, I'd really appreciate it.
Thanks!
Comment