Css Problem - IE not rendering correctly with images/text??

Dev Shed Forums Sponsor:

July 24th, 2003, 06:25 AM

Mr X

Junior Member

Join Date: Jul 2003

Location: England

Posts: 21

Time spent in forums: < 1 sec
Reputation Power: 0

Css Problem - IE not rendering correctly with images/text??!

Hi

I am trying to create a layout purely in css - although I am new to css! I have 3 coloums, a header which expands across the page, a right navigation menu and the main content area.

I am trying to align some images and text. Firstly I want a reasonably "large" image to display left with a series of smaller images below it, with 2 images on each "row" so it lines up nicely. Now I want the text to be aligned to the right of these images.

I cant get the smaller images under the large image but the most annoying thing is the text seems to just flow into the right navigation and off the screen!! This only happens in IE, as it works fine in Netscape/opera etc. They render it so the text wraps when it reaches the right navigation and onto the next line.

Heres what I have so far:

The css for the right + center cols:

#rightcol {
position: absolute;
left: 85%;
top: 15%;
margin-top: 0;
padding-top: 0;
font-size: 0.8em;
z-index: 2;
}

#content {
margin: 0 22% 0 0;
padding-left: 1.5%;
font-size: 0.8em;
z-index: 1;
}

The HTML for the right col:-

<div id="rightcol">
<h3>Lorem</h3>
<a href="somelink.html">Lorem ipsum</a><br />
<a href="somelink.html">Lorem ipsum</a><br />
<a href="somelink.html">Lorem ipsum</a><br />
<a href="somelink.html">Lorem</a><br />
<a href="somelink.html">Lorem</a><br />
<a href="somelink.html">Lorem</a></p>
</div>

The HTML for content:-

<div id="content">
<div class="imagefloat">
<img src="eg_large.gif" width="175" height="170" />
<img src="eg_med.gif" width="75" height="45" />
<img src="eg_med.gif" width="75" height="45" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio...etc etc etc</p>
</div>
</div>

The CSS for the imagefloat:

.imagefloat {
float: left;
}

.imagefloat img {
float: left;
margin-right: 0.5em;
border: 0.1em outset #ffffff;
}

Argh!!! Can anyone help please? Thanks!!!!

Last edited by Mr X : July 24th, 2003 at 06:31 AM.

July 24th, 2003, 07:57 AM

Akh

|<.+#f@#+.&.|

Join Date: Mar 2002

Location: norway

Posts: 3,009

Time spent in forums: 1 Month 4 Days 17 h 35 m 11 sec
Reputation Power: 1223

if understood you correctly,
something like this

Code:

html:

<div id="content">

	<div class="imagefloat">
		<img src="eg_large.gif" width="175" height="170" />
		<img src="eg_med.gif" width="75" height="45" />
		<img src="eg_med.gif" width="75" height="45" />
	</div>


	<p>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
		nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
		enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
		lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
		dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
		eu feugiat nulla facilisis at vero eros et accumsan et iusto odio...etc etc etc
	</p>
</div>

css: 

.imagefloat {
	float: left;
	width:200px;
}

July 24th, 2003, 09:51 AM