Floating Script Acting Erractic [Archive]

View Full Version : Floating Script Acting Erractic

Markxxx

04-02-2007, 01:31 AM

I wrote a script. Basically I want to present a jpg then a space then put some information in a box

I used CSS.

The script works fine but here's the issues. I can load the script 5-10-20 times and it works fine. Then all of a sudden the spacing goes WAY off

I wrote the script below. It seems to be OK then the spacing goes off. If you copy and paste the script you can see there are two sections and there is an inch or so which is the way I want it. Suddenly there will be 7 or 8 inches between section 1 and 2 and I have no idea why? Or why it's so erractic. It does this in Firefox and K-Meleon. I tried it in IE and it seems OK there, I haven't had a spacing issue.

Can anyone tell me what I did wrong with the script below? I need it to be consistant all the time.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
.body
{float: right;
border-width: thin;
border-style: solid;
width: 60%;
margin: 0cm
padding 0cm;
}
.pic{
width: 30%;
border-width: thin;
border-style: solid;
margin: 0cm;
padding 0cm;
}
.clr{clear: right;}
h3{text-align: center}
</style>
</head>
<body>
<h1>
Example.Com
</h1>
<div><br /><br /></div>
<div class="body">
University of XXXXXXXXXX-1
<br /><br />
City Location
<br /><br />
Dates
<br /><br />
Degree
</div>
<div class="pic">
<img src="jpgs/xxx.jpg" alt="XXXXXXX-1 jpg"/>
</div>
<div class="clr"><br /></div>
<div class="body">
University of XXXXXXXXXX-2
<br /><br />
City Location
<br /><br />
Dates
<br /><br />
Degree
</div>
<div class="pic">
<img src="jpgs/xxx.jpg" alt="XXXXXXX-2 jpg"/>
</div>
<h3 class="clr">
Additional Education</h3>
<p>
XXXXXXXXXXXXXXX
<br /><br />
XXXXXXXXXXXXXXXXX
<br /><br />
XXXXXXXXXXXXXXXXXXXXX
</p>
</body>
</html>

boogyman

04-02-2007, 01:02 PM

well for starters I wouldn't use cm as your measurement of seperating. em and pixels are much more standard practice in this field. the only "main" difference between the two is that em's rely on the size of the text as set by the user, pixels have a set width. If you intended for them to have no margin or padding, I would also use the margin:none; padding:none, even though technically giving an actual value of zero is not wrong

now as for your code, you do have a couple of errors

margin: 0cm
padding 0cm;

needs to be

margin: 0cm;
padding: 0cm;

you forgot the semi-color and colon... other than that, the only other thing that would possibly change the width would be the image

Markxxx

04-02-2007, 02:19 PM

Thanks I had actually fixed that already. I changed cm to em and nothing.

It works fine for sometimes as many as 25 rereshes, then it goes all askew again.

The thing is if I take the clr float out between the two image sections, the huge disapears. And I have no problems.

The images are large enough to prevent the float from keep floating right. So for some reason the clearing of the float is producing instead of what should be 2 <br /><br /> and making the space in there the height the whatever image is.

Is there another way to do this? I guess I'll just use a table for now, and come back and fix it if I can ever figure it out.

Thanks

boxxertrumps

04-02-2007, 06:38 PM

You should validate your HTML and CSS, then run your code with an error console running, like firebug. (oh wait, you don't have JS NVM...)

I cleaned up your code, fixed a few css errors.
should work better now.

Markxxx

04-02-2007, 10:00 PM

Ok boxxertrumps thanks for your help. I used the script you attached. I must be the jpgs that are causing the issue when I insert them. I will attach a couple of screen captures. And you can see whatever size the first jpg is, causes the browswer to space that amount.

I tried this in Mozilla based Firefox, Mozilla and K-Meleon and it comes and goes, the spacing issue. I tried it in IE 5 and IE6 and the spacing works fine.

So you can see it's the jpgs. Any idea what causes that or what do do to fix this?

Thanks for your hlep.