Sandbag Div (text around image) problem 1

[requested89]

I am trying to create a design using the principles of the sandbag div tutorial found Here[/LINK].

My design loks fine in IE/PC but it won't render properly in Firefox, on the PC or Firefox, Safari or IE on the Mac.
The basic problem is that I need all the divs that hold the images to float:right; but this only works in IE/PC. To make matters worse, Firefox simply doesn't recognise the float and the text just overlaps the image whereas IE on the Mac seems to create a whopping great big break as if the picture is just placed in the middle of the page with no CSS applied.

My page can be viewed [url=http://www.sproutuk.com/sprout/]Here[/LINK]. I'd appreciate any help as this is my first CSS project and I'm not really sure what I'm doing.

The CSS is below:

body { 
	font: 8pt/16pt georgia; 
	color: #663333; 
	margin: 0px;
	}

#container { 
	background: url(assets/flower.gif) no-repeat top left; 
	padding: 0px 175px 0px 110px;  
	margin: 10px;
	height: 500px;
	}
	
#face {
	float: right;
}

#logo {
	float: left;
	width: 410px;
	padding: 40px 0px 30px 30px;
}
	
h1 { 
	margin: 20px 20px 20px 10px; 
	float: left;
	}

	
#mainBody {
	clear:both; 
	margin: 0px 0px 0px 30px; 
	float: left;
	width: 570px;
	height: 100%;
	padding: 10px;
	
	border-width: 1px;
	border-color: #555753;
	border-style: dashed;

	}

#smr-00, #smr-01, #smr-02, #smr-03, #smr-04, #smr-05,
#smr-06, #smr-07 {
	float: right;
	clear: right;
	padding: 0px;
	width: 50px;
}

Thanks in advance, I appreciate it.

Chris

 

[BillyRayPreachersSon]

The example page you posted the link for looks fine for me in FF (Win)... so is there possibly any CSS from their page you didn't copy over that might cause it to break?

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[requested89]

When you say it looks fine, is the text on the page wrapping around the image of the face or is it going over it? It just goes over it on my computer as if the float is being ignored.

Thanks,

Chris

 

[BillyRayPreachersSon]

I'm talking about the ORIGINAL page, not yours.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[requested89]

My page isn't done exactly the same it just uses the principle of the different length divs to control the flow of the text. The main problem is that I can't get the divs to line up correctly. They should be left right aligned but instead they seem to be left aligning which means the image doesn't look right.

By the way, the example site I gave (not mine but the tutorial) works fine in all the browsers I've tested as well.

Any ideas?

Thanks in advance.

Chris

 

[ChrisHunt]

Having the divs inside a span might be confusing it. It might also be confused by the fact you've declared a 50 pixel width for each div, regardless of the width of the image.

The tutorial you linked to actually uses a true background image for the girl, then overlays it with (what would normally be) empty <div>s floated into place like old fashioned spacer gifs.

The technique you're using - slicing up the actual image and floating the slices - is more akin to that shown on

http://www.meyerweb.com/eric/css/edge/raggedfloat/demo.html

. Frankly, wrapping each image in its own <div> looks like overkill to me. Try marking it up like this:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In hendrerit, dolor ut consectetuer convallis, diam tortor scelerisque eros, in volutpat purus nibh vulputate libero.
<span class="wrapright">
<img id="smr-00" src="assets/face_02.jpg" alt="" />
<img id="smr-01" src="assets/face_04.jpg" alt="" />
<img id="smr-02" src="assets/face_06.jpg" alt="" />
<img id="smr-03" src="assets/face_07.jpg" alt="" />
<img id="smr-04" src="assets/face_09.jpg" alt="" />
<img id="smr-05" src="assets/face_11.jpg" alt="" />
<img id="smr-06" src="assets/face_13.jpg" alt="" />
<img id="smr-07" src="assets/face_15.jpg" alt="" />
</span> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In hendrerit, dolor ut consectetuer convallis,

Then, instead of applying rules directly to #smr-00, #smr-01, etc. you can do this:

.wrapright img {
  float: right;
  clear: right;
  padding: 0;
  border: 0;
}

You may then need to add individual width rules for each slice (but try without first):

#smr-00 { width: 243px; }
#smr-01 { width: 251px; }
... etc ...

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[BillyRayPreachersSon]

It appears that the "width:100px" on the floating DIVs is being honoured in Firefox, and thus causing your problem. I've not spotted a solution yet, however.

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[requested89]

Thanks guys problem sorted. It now renders perfectly in Firefox, IE, Safari & Netscape. It seems the problem was the width:50px being honored as you point out BillyRayPreachersSon.

Thanks for the help ChrisHunt, I've awarded you a star for your excellent pointers. I didn't realise I would be able to put them all in one span and then align that instead of individual divs. I actually thought that it should work yesterday in theory but after trying for a while it clearly didn't. Live and learn I guess.

By the way could you just help me out as to what the practical difference is between using an ID Selector over a Class Selector. Judging by what I've seen using a Class means you have to refer to a particular type of tag i.e. div, a, img etc whereas using an ID I could refer to any tag with the same ID. What is the benefit of using a Class?

Thanks in advance,

Chris

 

[Vragabond]

Class can be reused as many times as you want on a single website, while id uniquely identifies one element. That is the only difference.

 

[BillyRayPreachersSon]

That is the only difference

That, and the weightings given to each when calculating specificity.

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ChrisHunt]

I didn't realise I would be able to put them all in one span and then align that instead of individual divs.

That's not, technically, what my CSS does.

[green].wrapright[/green] [red]img[/red] {
  float: right;
  ... etc ...
}

applies the floating and so on to all [tt][red]img[/red][/tt] elements that are contained within an element with [tt]class="[green]wrapright[/green]"[/tt]. So it's still the individual images that are aligned, but I use the power of CSS to address them collectively rather picking them out individually with a [tt]class[/tt] or [tt]id[/tt].

Incidentally, if you don't need to explicitly assign a width to each one (and I don't think you do), you can dispense with the images' [tt]id[/tt] attributes too.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[requested89]

I've re-read he CSS and I understand now ChrisHunt. The CSS is controlling the Img as you rightly point out.

It's pretty impressive stuff this CSS isn't it.

Thanks for you help.

Chris