#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    England
    Posts
    21
    Rep Power
    0

    Question 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.
  2. #2
  3. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    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;
    }
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    England
    Posts
    21
    Rep Power
    0
    That works great!

    Thanks very much for your time!

    Cheers!

IMN logo majestic logo threadwatch logo seochat tools logo