hopefully easy, css image float question

**gpigate** · 04-30-2010, 07:22 PM

http://outdoorsindoors.net/DEV/PTC2/...ge=models/test

on that page there, under the camera picture on the left, the 2 little images should be side by side, this works in ff but not in IE.

Also the case guarantee and the 4 icons at the bottom, need to be floated or aligned in the right side under the text, but if I float them they always appear lower than the 2 small images in the left side.

Code:

<head>
<style >
#container
{
width: 90%;
background-color: #000;
color: #333;
line-height: 130%;
}

#leftnav
{
float: left;
width: 300px;
margin: 0;
padding: 1em;
}

#content
{
margin-left: 310px;
padding: 1em;
}

#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; color:#FF6600}
#content p { font-weight:bold}
</style>
</head>
<body>
<div id="container">
<div id="leftnav">
<img src="images/xpsite.jpg" border="0" /><br>
          <img src="images/bracket.jpg" width="150" height="139" alt="Tree Bracket"><img src="images/xpinside.jpg" width="150" height="139" alt="Predator Trail Cams Informer XP Inside">
</div>
<div id="content">
<h2>Introducing the INFORMER XP from Predator Trailcams</h2>
<p>
FORM Adjustable Day Resolution: 3.2 / 1.3 / 300kp<Br>
Adjustable Night Resolution: 1.3 / 300kp<Br>
Video Length: 5 – 30 Seconds (5 second increments)<Br>
Activation Delay: 5 seconds to 1 hour (5 second increments)<Br>
Time Lapse Delay: 5 seconds to 1 hour (5 second increments)<br>
Adjustable Infrared Range: High and Low<br>
Camera Lens: Polished Glass<br>
Camera Viewing Angle: 52&deg;<br>
PIR Motion Sensor Angle: 55&deg;<br>
PIR Motion Sensor Range: 75ft Day & Night<br>
Burst Images: 1 – 5 Burst Images per Trigger<br>
Memory Capability: Up to 16GB ( SD or USB)<br>
Operating Temperature: -20&deg; to +120&deg;F<br>
Theft Deterrence: 4 Digit Security Code<br>
Image Stamp: Date and Time<br>
Battery Requirements: 10 AA (Alkaline, NiMH Rechargable, or Lithium)<br>
External Power Source: 12 Volt Locking External Auxiliary Power Jack<br><br><br>
*All Specifications Are Approximate
</p>
<img src="images/ixpicons.jpg" style="position:absolute; top:750px; right:500px;" border="0">
<img src="images/cguar.jpg" style="position:absolute; top:300px; right:450px;" border="0">
<p>
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 dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</p>
</div>
</div>
</body>

**gpigate** · 04-30-2010, 08:01 PM

I also do not understand why the h1 up top in orange is on 2 lines in IE and on 1 in FF..... please help ?

**BLiZZaRD** · 04-30-2010, 10:23 PM

The problem with the H1 font is the fonts are different sizes in the browsers. Each browser is going with it's default font size for an H1 since you didn't declare one. Your container div shouldn't need a line-height. Once you fix the font sizes, most (if not all) should line up how you want them.

Thread: hopefully easy, css image float question

Thread Tools

Search Thread

hopefully easy, css image float question

Bookmarks

Bookmarks

Posting Permissions