Forum Moderators: not2easy
Here is the relevant portion of the stylesheet:
#topnav {float: left;
font-size: .9em;
text-align: right;
background: #ffffff url(grad4.jpg) repeat-y fixed;
color: #101090;
font-family: "Segoe Script", "Garamond", "arial rounded mt bold", Arial, Tahoma, sans-serif;
font-variant: small-caps;
font-weight: bold;
text-decoration: none;
display: block;
text-align: center;
margin-bottom: 5px; padding-bottom: 5px;
border-bottom: 1px dotted #443311;
}
#main { width: 76%; clear: left;
height: 1500px; text-align: left; display: block;
margin-right: 4px;
padding-bottom: 20px; padding-right: 8px; padding-left: 10px;
font-size: 1em; color: #000000; font-family: Tahoma, sans-serif;}
#side {float: right; width: 21%; height: 1500px; background: url(grad4.jpg) repeat-y;
text-align: right; border-left: 2px dashed #443311;
padding-bottom: 20px; padding-right: 0px; margin-left: 0px;
font-size: 1em; color: #000000; font-family: "Segoe Script", Tahoma, sans-serif;}
As is, it displays fine in Firefox, but in IE 7 the main content drops to the bottom of the page instead of floating.
So to fix this I added the attribute "float: left;" to the #main div. This causes the browser problem to flip-flop. Firefox now drops the main div and IE 7 floats it.
So I have no clue how to fix this problem. My first thought was that I could use two separate stylesheets but I am not sure how to do this (and every article I found on Google about how to do this was unsuccessful). Once again, this only happens when the window is reduced in size, and it is more noticeable at the 800X600 screen resolution).
Any help would be greatly appreciated, as this site is for my wife's new business and she is opening very soon.
Thanks,
Chris
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<html>
<head>
<title>snip</title>
<style type="text/css">
@import url(moxie.css);
</style>
</head>
<body>
<div id="topnav"><p>
<a href="index.htm"><img class="centeredImage" src="logo2.jpg" alt="Go to Homepage snip - Springfield's Premier Therapy Center" /></a> <br />
<a href="about.htm">Why Moxie?</a>
· <a href="appointments.htm">Make an Appointment</a>
· <a href="belavi.htm">Belavi Facelift</a>
· <a href="swedish.htm">Swedish Massage</a>
· <a href="reflexology.htm">Reflexology</a>
· <a href="geriatric.htm">Geriatric Massage</a>
· <a href="pregnancy.htm">Pregnancy</a>
· <a href="sports.htm">Sports Massage</a>
· <a href="deep.htm">Deep Tissue</a>
· <a href="polarity.htm">Polarity</a>
· <a href="infant.htm">Infant Classes</a>
· <a href="stones.htm">Hot Stone</a>
· <a href="shiatsu.htm">Shiatsu</a>
· <a href="products.htm">Moxie Products</a>
<br />
</p></div>
<div id="side">
<ul id="nav">
<li> <a href="about.htm">Why Moxie?</a></li>
<li><a href="appointments.htm">Appointments</a></li>
<li> <a href="belavi.htm">Belavi Facelift</a></li>
<li> <a href="swedish.htm">Swedish Massage</a></li>
<li> <a href="reflexology.htm">Reflexology</a></li>
<li><a href="geriatric.htm">Geriatric Massage</a></li>
<li><a href="pregnancy.htm">Pregnancy</a></li>
<li> <a href="sports.htm">Sports Massage</a></li>
<li> <a href="deep.htm">Deep Tissue</a></li>
<li><a href="polarity.htm">Polarity</a></li>
<li><a href="infant.htm">Infant Classes</a></li>
<li><a href="stones.htm">Hot Stone</a></li>
<li> <a href="shiatsu.htm">Shiatsu</a> </li>
<li><a href="products.htm">Moxie Products</a></li> </ul>
</div>
<div id="main"><p>
Welcome to www.<b>snip, snip</b>.com!
</p>
<h1>Feel Good again. You deserve it.</h1><h2>A Convenient Downtown Location</h2><p>
snip, snip. The atmosphere is nothing like what you are used to. How can we describe it? Tranquil, Serene, Quiet, Relaxing, Cozy, a Hidden Gem. Part of the appeal is that we are not an overpriced MegaSalon. It's the perfect place for you to bring your body, for healing. <br />
<img style="float: left; margin: 10px" src="massage2.jpg" height="200px" alt="Massage has many healing properties" />
</p>
<h2>Qualified, Friendly Therapists</h2>
<p>When you step through the door you will feel like you just stopped by to visit a friend. We have a very
skilled staff, all of whom are state certified and licensed, and members of ABMP. No matter what your pain is,
we would love to work <em>with</em> you to develop a custom-designed plan to alleviate it. Whether you are 25
or 65, you'll find a wonderful variety of treatments here to fit your body's specific needs. </p>
<h2>Exciting New Techniques</h2>
<p>We are the only therapy center in Springfield to offer the World Famous Belavi Honeylift Facial Massage.
This is a non-surgical facelift, very popular in Europe, New York, and Hollywood. Other special services include Reiki, Shiatsu, Pregnancy Massage, Infant classes, Sport Massage, Trigger Point, and Deep Tissue. You'll also find the brand new
line of premium quality skin care products, exclusively found at snip snip. Stop by and see!
</p><hr>
<p>
snip</p></div>
</body>
</html>
ok, I'd try wrapping the main and sidebar in another div. I find that, like tables, browsers have a hard time working out simple things like 3 floated divs, so where possible wrap 2 into 1.
I'd also try slimming your CSS down a bit, remove 'display: block' from all divs, this is default.
I assume you want #topnav to be full screen width, so remove 'float: left'.
Try taking 'width: 76%' and 'clear: left' off #main, and 'text-align: left' should be default so that can go too. 'padding-bottom: 20px; padding-right: 8px; padding-left: 10px;' can be written as 'padding: 0 8px 20px 10px;' (the order is top, right, bottom, left).
I also assume you want a 4px gap between #main and #side, take 'margin-right: 4px' off #main and turn it into 'margin-left: 4px'.
Try those things and see what happens. It should take it back to a point where you can start adding more CSS again.
Incidentally, I found another thread on this subject written by ME.
( [webmasterworld.com...] ) and Londrum's advice worked!
I must have forgotten I posed the question on February 7 of this year. NO WONDER this forum looked so familiar!
As I have never had any real formal training with CSS I was not sure how the display: and position: attributes worked. Now the site is ready for launch though. THANKS AGAIN!
Chris
[edited by: SuzyUK at 8:45 am (utc) on April 10, 2007]
[edit reason] link fixed [/edit]
