4 replies [Last post]
pavansut
Offline
newbie
NJ
Last seen: 17 years 50 weeks ago
NJ
Timezone: GMT-5
Joined: 2004-02-16
Posts: 8
Points: 0

Hi Folks, Need some help from brilliant minds. I have been working on a site for my wife's business for a while.

http://www.jayateas.com
style sheet: http://www.jayateas.com/main.css

Made some css style sheet changes recently, and the site seems to render perfectly on Mozilla (win and mac), Firefox (win and Mac), IE (mac) and Safari.

But the site is a disaster on Win IE! Crying

Two problems in particular are vexing me, and I am sure smarties among us might know an easy solution:
1) Win IE does not recognize the top margin of the container div.
2) Win IE does not want to respect the "clear: both" for the three right floated images (float1 div).

I haven't checked the site in browsers other than those listed above. Any help would be appreciated.
Kind regards,

Sunil

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 41 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Win IE Disaster!

Here's the solution to your first problem:

http://pub.c-o2.net/tea/tea.htm

You've used absolute positioning for the logo and header where you didn't need to (which probably resulted in the unpredictable margin problem). The container image has dropped down a bit now so you may want to reduce the 100px margin a little.

By nature, a div will stretch its width to as far as it can. In this case, 100% of the body. So, you don't need to declare this anywhere.

Here's the amended CSS code to replace in your CSS file:

body 
	{
	margin: 0;
	padding: 0;
	font-family:verdana, arial, helvetica, sans-serif;
	text-align: center;
	color:#333;
	background:#fff;
	}
div#Logo 
	{
	height: 63px; 
	margin: 0;
	border: medium none inherit;
	background: url(images/lban801.jpg) #56341C no-repeat;
	}
#Header 
	{
	margin:0;
	padding:0 0 4px 0; /*T R B L*/
	border-style:solid;
	border-color:black;
	border-width:1px 0; /* top and bottom borders: 1px; left and right borders: 0px */
	line-height: 16px;
	background-color:#eee;
	text-align: center;
	}

As for your second problem. How do you want those square images to work? All horizontally aligned with each other side-by-side? If you let me know, it'll be easy enough to fix (by the way, you've got an div with a id called float1 and a class titled float1, change one to a different name.

The next sentence is true. The previous sentence is false. Discuss...

pavansut
Offline
newbie
NJ
Last seen: 17 years 50 weeks ago
NJ
Timezone: GMT-5
Joined: 2004-02-16
Posts: 8
Points: 0

Win IE Disaster!

Hi Co2:
Thank you for your excellent feed back! Great pointers on the absolute and relative positioning. I am still getting used to the terminology and get easily confused! I'll change the name of float1 div to reflect your comments.

About the images, I like the images stacked one on top of the other just the way they are, along the right edge of the container, but the text needs to flow to the left of the images, from the top image down to the end of the container. Right now it flows from the top of the third image, which leaves an ugly gap between the top "billboard" image and the start of the text below it.

Its correctly rendered on Firefox or Mozilla, if that helps.

Again, really appreciate your prompt and constructive feed back.

Sunil

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 41 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Win IE Disaster!

Okay, it's fixed. Simple enough. Rather than float all the images, it's better to float the container div they reside in (cut's out a load of floats then). Here's the example:

http://pub.c-o2.net/tea/tea.htm

Here's the CSS you need to replace (I've retitled that container div from #float1 to div#floatContainer... you'll find it helpful to place the intended attribute in front of a CSS ID name such as div#blahblah; this makes it easier to spot what you're looking for in a load of CSS code Wink ) I've also renamed the image class to .imgRight:

div#floatContainer
	{
	float: right;
	width: 160px;
	}
img.imgRight
	{
	margin: 10px 0 0 10px;
	}

And here's the HTML to replace:

<div id="floatContainer">
				<p><img class="imgRight" src="images/se.jpg" alt="" width="160" height="160"></p>
				<p><img class="imgRight" src="images/ft.jpg" alt="" width="160" height="160"></p>
				<p><img class="imgRight" src="images/mf.jpg" alt="" width="160" height="160"></p>
			</div>

The next sentence is true. The previous sentence is false. Discuss...

pavansut
Offline
newbie
NJ
Last seen: 17 years 50 weeks ago
NJ
Timezone: GMT-5
Joined: 2004-02-16
Posts: 8
Points: 0

suggestion works like a charm

Co2, you are a lifesaver! Laughing out loud

Your suggestions worked like a charm. The only thing I added to your code was clear: both; and the images floated to the right with the text to their left. Just the way I wanted them. Makes me a big beliver in this CSS thing. But I need to get better. Soon!

Mucha Gracias.

Sunil
Here is the final output...for anyone interested.

www.jayateas.com