Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Correct Method of .CSS <ul> adjacent to IMG

Status
Not open for further replies.
rockyroad

rockyroad

Programmer
Feb 22, 2003
191
US
Hi,

I am trying to figure out how to set correct margin between a left floated IMG and an adjacent <ul>. But I am getting different results in IE and FF.

Does anyone know the correct way to do this?

Code: 
<style type="text/css">
#theDiv{width:800px; height:1000px; background-color:#00FFFF;}
#theDiv li{margin-left:35px;}
</style>

Code: 
<div id="theDiv">
<img src="images/ACF2F.jpg" style="float:left;">
<ul>
<li>hsad sad as hsd khasd sh ksah kash</li>
<li>hsad sad as hsd khasd sh ksah kash</li>
<li>hsad sad as hsd khasd sh ksah kash</li>
<li>hsad sad as hsd khasd sh ksah kash</li>
</ul>
</div>

Right now this works in FF but not IE...

Thanks :) RR
 
Sort by date Sort by votes
You will get different results as IE puts the bullets 'outside' of the li 'box' (probably incorrectly) and FF puts them 'inside'.

You could wrap the ul inside another div and style that with some padding, live with the differences, or try some other way.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
If I read your post correctly, the IMG and the UL (sorry for the caps, helps me to distinguish what I'm talking about in the post) are to be laid out in a 2-column format. So what I'd recommend is setting a left float on both the IMG and the UL elements, and adding either a margin-right:35px ; to the IMG element, or a margin-left:35px; to the UL element, such as follows:
Code: 
<html>
<head>
<style type="text/css">
#theDiv {
  width:800px; 
  height:1000px; 
  background-color:#0FF;
}
#theDiv img  { 
  float: left ; 
	margin: 0 ;
	padding: 0 ;
  margin-right: 35px ;
}

#theDiv ul  {
  float: left ;
	margin: 0 ;
	padding: 0 ;
	list-style: none ;
}
</style>
</head>
<body>

  <div id="theDiv">
    <img src="images/ACF2F.jpg">
    <ul>
      <li>hsad sad as hsd khasd sh ksah kash</li>
      <li>hsad sad as hsd khasd sh ksah kash</li>
      <li>hsad sad as hsd khasd sh ksah kash</li>
      <li>hsad sad as hsd khasd sh ksah kash</li>
    </ul>
  </div>
</body>
</html>
Also, you'll notice that I explicitly set the margin and padding to 0 on both the IMG and UL elements - some browsers have different default values to apply to these (and other) elements when the values are not specified. By setting them to 0, we can ensure the items will (hopefully) be displayed correctly across various browsers.

PS: I tested this sample in IE6 and FF2.0 ... same thing in both cases.

HTH

Greg
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
778
spamjim
spamjim
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
755
pmonett
pmonett
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
713
bdwilcox
bdwilcox
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
604
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top