Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Background Color

Status
Not open for further replies.
PaulHolmes

PaulHolmes

MIS
Aug 2, 2002
28
GB
Hello,

Website at present looks OK in IE6 on PC. However, on MAC Safari and IE my float:left seems to disable to background-color?

Code:

CSS:
body { margin: 0px 0px 0px 0px; padding: 0px; text-align: center; background-color: blue; }

/* Generic classes */
.ahem { display: none; }
.center { text-align:center; }
.clear1px { clear:both;height:1px;line-height:1px;font-size:1px; }
.ScreenReaderOnly { position: absolute; top: -1000px; left: -1000px; }
img { border: none; }

.floatleft { float:left; }
.floatright { float: right; }

.linebreak { background-image: url(/leisure/images/line_break.gif); background-repeat: repeat-x; height: 4px; font-size: 1px; line-height: 4px; margin: 5px 10px 5px 10px; background-position: left top; }
.linebreak hr { display: none; }


#topbg { background-image: url(/leisure/images/bg_top.gif); background-repeat:no-repeat; background-position: center top; height:65px; width:723px; margin:0px auto 0px auto;}

#bg { background-image: url(/leisure/images/bg.gif); background-repeat: repeat-y; background-position: center top; margin:0px auto 0px auto; width:723px; }

#flashit { margin: 0px 0px 0px 0px; width:auto; height: auto; padding: 10px 0px 0px 0px; }

#main {background-color:white; width:569px; height:100%; margin:5px auto 0px auto; text-align:left;}

#left { width:160px; height:100%; background-color:#373737; float:left; }
#right { width:409px; height: 100%; background-color:white; float:left; }

.mainnav { text-align:left; color:#FFFFFF; }
.mainnav ul { list-style:none; margin:0px 0px 0px 0px; padding:10px 0px 0px 0px; }
.mainnav li { margin:0px 0xp 0xp 0px; padding:0px 0px 0px 0px; }

.spacer {margin: 0px auto 0px auto;}

.rightmain { background-image: url(/leisure/images/bg_body_top.jpg); background-repeat:no-repeat; height:184px; width:409px; margin:0px; padding:0px; float:left;}


HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cadogan Travel</title>

<!--Meta-Data-->
<meta name="Description" content="" />
<meta name="Keywords" content="" />


<meta name="Author" content="Paul Holmes" />

<!--#include file="_Resources/head.asp"-->

</head>

<body>



<div id="topbg"></div><!--TopBG-->


<div id="bg">

<div id="flashit">

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=" WIDTH="569" HEIGHT="376" id="leisure" ALIGN="">
<PARAM NAME="loop" VALUE="false">
<PARAM NAME="movie" VALUE="flash/leisure1.swf">
<PARAM NAME="quality" VALUE="high">
<PARAM NAME="bgcolor" VALUE="#FFFFFF">
<EMBED loop="false" src="flash/leisure1.swf" quality="high" bgcolor="#FFFFFF" WIDTH="569" HEIGHT="376" NAME="leisure" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="</OBJECT>

</div><!--flashit-->


<div id="main">
<div id="left">

<!--#include file="_Resources/navigation.asp"-->

</div><!--left-->



<div id="right">
<div class="rightmain">

Test

</div<!--rightmain-->
</div<!--right-->


</div><!--Main-->

</div><!--BG-->



</body>
</html>

Website is: htt://
Thanks for your help.

Paul.
 
Sort by date Sort by votes
my float:left seems to disable to background-color?
Click to expand...
Huh?

Start by fixing validation errors like these almost-but-not-quite closing tags
Code: 
</div<!--rightmain-->
</div<!--right-->
then, if whatever's going wrong is still going wrong, explain it a bit more clearly and we'll try to fix it.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Thanks Chris,

I have closed my <div> properly now.

If you have a look at you will see that I have two borders, a fade out and a white border. As soon as I use a float:left these two borders seem to stop and do not continue down the page any further. This only happens in Safari and IE on MAC. Works fine in IE on Windows.

Thanks for your help.

Paul.
 
Upvote 0 Downvote
Figured it out, as simple as putting a div below the float container.

<div style="clear:both;"></div>

Thank you.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
345
3esolar
3
garcosta
  • Locked
  • Question
CSS Coding for Gradient Color Background for all Platforms
Replies
3
Views
82
1DMF
1DMF
csphard
  • Locked
  • Question
need help with footer h3 background-color. 2
Replies
8
Views
169
vacunita
vacunita
nwo4life
  • Locked
  • Question
Paypal button for multiple prices by Quantity and color
Replies
1
Views
60
ChrisHirst
ChrisHirst
yaknowss
  • Locked
  • Question
Create divs with different background colors
Replies
1
Views
82
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top