White Space only in IE/PC?

JohnWorfin · #1 11-18-2004, 12:43 PM

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

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="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">

</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

27CDB6E-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="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="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="sitemap.htm">SiteMap</a>
</div>
<div id="grnBG">
</div>

</div>

</body>
</html>

BonRouge · #2 11-20-2004, 11:58 AM

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.

soccer362001 · #3 11-20-2004, 12:20 PM

I just have one question. Why are you centering you conent using only floats?

JohnWorfin · #4 11-22-2004, 08:27 AM

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 fix

toicontien · #5 11-22-2004, 02:26 PM

All you need to center the contents of your page, minus the contents of your page of course

PHP Code:


			
<!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>

JohnWorfin · #6 11-29-2004, 09:20 AM

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?

toicontien · #7 11-29-2004, 10:01 AM

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 . 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:

PHP Code:


			
<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.

JohnWorfin · #8 11-29-2004, 10:09 AM

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">

</style>
</head>
<body>
<b>JUST A TEST JUST A TEST JUST A TEST</b>
</div>
</body>
</html>

JohnWorfin · #9 11-29-2004, 02:19 PM

Thanx a ton toicontien,

It was just a simple syntax error i had that was screwing up my whole layout.

Thanx again!

toicontien · #10 11-29-2004, 02:29 PM

Any time.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)