...

View Full Version : downward shifted image in top DIV float



budpiano
05-17-2009, 09:30 AM
I'm new. My top full-width "logo" DIV is 100px height. i have 2 floating images of 100px height also. when floated on the right and on the left, they fit snugly inside for IE7...but Firefox has them shifting downward and out of the DIV by ~25px. i'm sure it's easy to fix...right?? There is a "main" DIV and a "wrapper" DIV 'behind' it(for lack of a more technical term). i've been playing around with the code so much that i hesitate to paste it here at first. any guidance is much appreciated. arto

oesxyl
05-17-2009, 09:37 AM
I'm new. My top full-width "logo" DIV is 100px height. i have 2 floating images of 100px height also. when floated on the right and on the left, they fit snugly inside for IE7...but Firefox has them shifting downward and out of the DIV by ~25px. i'm sure it's easy to fix...right?? There is a "main" DIV and a "wrapper" DIV 'behind' it(for lack of a more technical term). i've been playing around with the code so much that i hesitate to paste it here at first. any guidance is much appreciated. arto
you can post a link to a test page?

best regards

budpiano
05-17-2009, 10:55 AM
<div id="wrapper">
<!--*wrapper beg.-->
<div id="header">
<!--*header beg.-->
<p><img class="floatleft" src = "photos\TrnsprtMrktRxs250x100.jpg" alt="Palawan-El-Nido"/>
</p>
<p><img class="floatright" src = "photos\FrmElNdRm250x100.jpg" alt="Palawan-El-Nido"/>
</p>

</div>
<!--*header end-->

And the CSS
#header{
height: 100px;
margin: 0 0 0 0;
padding: 0 0 0 0;
border: 1px solid black;
background-color: blue;
}
img.floatleft {
padding: 0 0 0 0;
margin: 0 0 0 0;
float: left;
}
img.floatright {
float: right;
}

oesxyl
05-17-2009, 11:02 AM
please put your codde between [ code] and [ /code] tags.
was better to have a link then code inside your post, :)
try to remove p tags and live img inside the div( in your code img float relative to p not to div).

best regards

budpiano
05-17-2009, 11:33 AM
i'll try. your kindness is appreciated. arto

budpiano
05-17-2009, 12:21 PM
I was copying what i saw in my book. :D:D:D

oesxyl
05-17-2009, 12:27 PM
I was copying what i saw in my book. :D:D:D
you can use firebug extension for firefox to play and expreiment with css and javascript, :)

best regards

Excavator
05-17-2009, 03:30 PM
Hello budpiano,
Like oesxyl has said, it'd be easier with a link since we don't have either your images or the complete code.

I don't think there is any reason for putting those images in paragraph tags so I removed them.
When you float things, they need to have a width. Since you will probably re-use your .floatright and .floatleft classes I added the width inline.
Instead of using margin:0; and padding:0; on everything in your CSS, enter it once with the bit I added.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
}
#header{
height: 100px;
border: 1px solid black;
background-color: blue;
}
img.floatleft {float: left;}
img.floatright {float: right;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<img class="floatleft" src="photos\TrnsprtMrktRxs250x100.jpg" width="250" height="100" alt="Palawan-El-Nido"/>
<img class="floatright" src="photos\FrmElNdRm250x100.jpg" width="250" height="100" alt="Palawan-El-Nido"/>
<!--header end--></div>
<!--end wrapper--></div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum