White Space only in IE/PC?

L

liunx

Guest
Hello all.

My problem is that im woking on using CSS to center my whole page using floats.

The problem is that everything so far looks good in IE/Mac but in IE/Win I have a small white spacing just below the copper band?

I'm pretty new to CSS design and REALLY new to using floats.

Any help is much appreciated!

Site (<!-- m --><a class="postlink" href="http://meeks.com/index3.html">http://meeks.com/index3.html</a><!-- m -->)

CSS so far:

body {
background-color: #ffffff;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 1em;
text-align: center;
margin: 0em; }

#frame {
width:779px;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align:left;
}

#red-banner {
background-image: url(images/redbanner.jpg);
width: 777px;
height: 24px;
background-repeat: no-repeat;
float: left; }

#navbar {
font-weight: bold;
font-size: 12px;
border: none;
display: block;
bottom: 125px;
background-color: #DC2339;
text-align: center;
height: 460px;
border-left: 3px #ffffff solid;
border-right: 3px #ffffff solid;
width: 106px;
float: left; }

#navbar a:link, #navbar a:visited {
display: block;
color: #ffffff;
padding-top: 6px;
padding-bottom: 6px;
text-decoration: none;
border: 1px #cccccc none;
}

#navbar a:hover {
background-color: #ffcc33;
color: #000000;
}

#header {
background-image: url(images/IndexF_01.jpg);
width: 308px;
height: 75px;
top: 0em;
float: left;
}

#header2 {
background-image: url(images/IndexF_02.jpg);
top: 0em;
width: 469px;
height: 75px;
background-repeat: no-repeat;
float: left; }

#band {
width: 777px;
height: 22px;
float: left;
background-image: url(images/IndexF_09c.jpg);
background-repeat: repeat-x;
clear: both; }

#flash {
width: 308px;
height: 460px;
float: left;
}

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Meeks the Builders Choice</title>


<META NAME="description" CONTENT="Located in Missouri, Arkansas, Califorania and Nevada
Meek's building centers is the nations #1 supplier of professional and do-it yourself home builders
as well as major construction projects.">

<META NAME="keywords" CONTENT="meek, meeks, meek's, meek lumber, meek's lumber, the builders choice, roofing,
the builder's choice, meeklumber, meekslumber, lumber, lumber supply, lumber supplies, wood, doors, windows,
missouri, arkansas, california, nevada, mo, ar, ca, nv, contractor sales, meeks building center, tools, stanley,
meeks building centers, meeks buliding center's, meek's building center's, cmeek for lumber, construction">

<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"meeks-homeTEST.css" title="meeks-home" />
<script type="text/javascript">

function goThere(){


searchterm = document.items.theitem.value;
top.location="http://www.doitbest.com/shop/assoc/find.asp?id=1010B&find_spec= "+searchterm+"";
}

</script>
<style type="text/css">
<!--
.style1 {font-size: 10px}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>

<body>
<div id="frame">
<div id="header">
</div>
<div id="header2">
</div>
<div id="red-banner">
</div>
<div id="band">
</div>
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://Download .macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="307" height="460">
<param name="movie" value="images/Flash/framedHouse4.swf" />
<param name="quality" value="high" /><param name="SCALE" value="noborder" />
<embed src=http://www.webdeveloper.com/forum/archive/index.php/"images/Flash/framedHouse4.swf" width="307" height="460" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" scale="noborder"></embed>
</object>
</div>
<div id="navbar">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Shopping5.htm">Shop</a> <a href="locations.htm">Locations</a> <a href="howto.htm">How To</a> <a href="news.htm">Company News</a> <a href="jobs.htm">Employment</a> <a href="mainhistory.htm">About Meek's</a> <a href=http://www.webdeveloper.com/forum/archive/index.php/"sitemap.htm">SiteMap</a>
</div>
<div id="grnBG">
</div>

</div>

</body>
</html>Are you still using that same page? (Is that link still good?) I don't know about the white space (couldn't see it) but you have a bigger problem in Firefox - there's weird jumping on the left when you hover over the right-hand nav.I just have one question. Why are you centering you conent using only floats?well, im really new to this so I didnt really now any other way.

Yea Im sure my css needs a lot of work for other browsers just kinda learning.

and I think I got the white space to fixAll you need to center the contents of your page, minus the contents of your page of course ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Center whole layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
<!--
/* text-align: center; will center the layout for IE5-Win and IE6-Win
running quirks mode (no DOCTYPE tag at beginning of document). */
body {
margin: 0;
padding: 0;
text-align: center;
}

/* The auto left and right margins center the layout in standards
browsers, IE6-Win (in standards mode) and IE5-Mac. */
#wrapper {
margin: 0 auto 0 auto;
text-align: left; /* Reset text alignment for Western languages. */
width: 770px;
}

/* Standards browsers will cut off portions of the left and right edges
of a layout if the browser viewport is too narrow, unless the
#wrapper <div> has a left and right border. Internet Explorer is not
affected by this, and the style rules are hidden. Setting the border
color to transparent initially returns a CSS syntax error at the W3C
CSS validator, so for the sake of validation, the border color is
set to transparent on a separate line. */
html>body #wrapper {
border: 1px solid #fff;
border-color: transparent;
border-top: 0;
border-bottom: 0;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<!-- Place all HTML for the entire page here. -->
</div>
</body>
</html>Im sych a CSS noob

I cant get the content to center just using that on a simple test.

is that written for PHP?

Do I need to make a separate stylesheet or is what you have how I need to do it?The code I posted is the whole HTML document. Simply place all the HTML you have between the opening and closing BODY tags and paste it in place of the HTML comment <!-- Place all HTML for the entire page here. -->. There's nothing more too it.

If you want the CSS in a separate file, place all the style declarations between the <style> and </style> tags in the separate file. You can import the styles to your HTML document using the @import method:

<style type="text/css" media="screen">
<!--
@import "layout.css";
-->
</style>

:) And the code isn't written for PHP. I just clicked the "PHP" button to insert a code block when I wrote the post. It was easiest that way. My post has nothing to do with PHP.Sorry to bother you again, but I really appreciate the help.

I just tried a simple test line for centering and it still doesnt :(




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Center whole layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
<!--
/* text-align: center; will center the layout for IE5-Win and IE6-Win
鐟旂憯鐟攔unning quirks mode (no DOCTYPE tag at beginning of document). */
body {
鐟旂憯margin: 0;
鐟旂憯padding: 0;
鐟旂憯text-align: center;
}

/* The auto left and right margins center the layout in standards
鐟旂憯鐟旂憯browsers, IE6-Win (in standards mode) and IE5-Mac. */
#wrapper {
鐟旂憯margin: 0 auto 0 auto;
鐟旂憯text-align: left; /* Reset text alignment for Western languages. */
鐟旂憯width: 770px;
}

/* Standards browsers will cut off portions of the left and right edges
鐟旂憯鐟攐f a layout if the browser viewport is too narrow, unless the
鐟旂憯鐟
 
You must log in or register to reply here.
Back
Top