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 TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

style:height in IE? 2

Status
Not open for further replies.
Chacalinc

Chacalinc

Vendor
Sep 2, 2003
2,043
US
Hi,

in CSS i have &quot;height: 30px;&quot; for a <div>. In Mozilla it works ok, but in IE in does not work...

some IE issue? is there a workaround? did I misused?

Thanks in advance.
 
Sort by date Sort by votes
There are lots of other factors that could be stopping IE rendering to the correct height.

Can you post your code and CSS?

Dan
 
Upvote 0 Downvote
CSS:

#cabezera ul li {
background-color: #CCCCCC;
display: inline;
border: 1px solid #000000;
font-weight: bold;
height: 30px;
}

#page:

<div id=&quot;cabezera&quot;>
<ul>
<li>&nbsp;</li>
<li>No se toca hoy</li>
<li>Instalaci&oacute;n IAS 10g (J2EE)</li>
<li>Instalaci&oacute;n IAS 10g (J2EE)</li>
<li>Instalaci&oacute;n SG</li>
<li>Instalaci&oacute;n SG Infraestructura</li>
</ul>
</div>

Thanks..
 
Upvote 0 Downvote
This works for me in IE:

Code: 
<html>
<head>
<style type=&quot;text/css&quot;>
#cabezera ul li {
	background-color: #CCCCCC;
	display: inline;
	border: 1px solid #000000;
	font-weight: bold;
	height: 30px;
}
</style>
</head>
<body>
<div id=&quot;cabezera&quot;>
	<ul>
		<li> </li>
		<li>No se toca hoy</li>
		<li>Instalación IAS 10g (J2EE)</li>
		<li>Instalación IAS 10g (J2EE)</li>
		<li>Instalación SG</li>
		<li>Instalación SG Infraestructura</li>
	</ul>
</div>
</body>
</html>

Do you have a DOCTYPE tag at the top of your code? That might be an issue... If not, what version of IE are you running? Try my code above and see what you get.

Hope this helps,

Dan
 
Upvote 0 Downvote
nop.. no DOCTYPE. Tryed in IE 6.0..

I will try your code.. I'll let you know what happen.

Thanks.
 
Upvote 0 Downvote
your code works!

Ok, I made the following now:
Code: 
-----------tabla.CSS:
#tabla {
	text-align: center;
  	width: 740px;
	}

#tabla ul {
	list-style: none;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

#tabla li {
    float: left;
	/*list-style: none;*/
	background: #ffffff;
	display: inline;
	border: 1px solid #000000;
	padding: 5px;
	margin: -1px -1px 0 0;
    width: 112px;
	}
		
#cabezera ul li {
	background-color: #CCCCCC;
	font-weight: bold;
	height: 30px;
}

#nombres ul li {
	background-color: #afce00;
	font-weight: bold;
}
----------index.html
<html>
<head>
    <link href=&quot;css/tablas.css&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot; />
</head>
<body>

<div id=&quot;tabla&quot;>
  <div id=&quot;cabezera&quot;>
  <ul>
  <li>&nbsp;</li>
  <li>No se toca hoy</li>
  <li>Instalaci&oacute;n 1 (J2EE)</li>
  <li>Instalaci&oacute;n 2 (J2EE)</li>
  <li>Instalaci&oacute;n SG</li>
  <li>Instalaci&oacute;n SG otro</li>
  </ul>
  </div>
  
  <div id=&quot;nombres&quot;>
  <ul>
  <li style=&quot;{text-align:left;}&quot;>Hostname:</li>
  <li>iap</li>
  <li>iaj</li>
  <li>iar</li>
  <li>dbp</li>
  <li>dwp</li>
  </ul>
  </div>
<ul>
<li style=&quot;{text-align:left; background-color: #CCCCCC}&quot;>Domain</li>
<li>secta.com</li>
<li>otts.com</li>
<li>pack.com</li>
<li>site.com</li>
<li>sitio.com</li>
</ul>

</div>

</body>
</html>

As you can see, I'm a complete newbe in CSS. I want to avoid tables.

Thanks!
 
Upvote 0 Downvote

Was there a problem with the code in your last post, or were you posting it to keep anyone reading the thread up-to-speed with your final solution... You didn't say ;o)

Dan
 
Upvote 0 Downvote
Here are just two general observations to help you with your css:

1. When applying an inline style, you do not use the parenthesis:
<li style=&quot;text-align: left;&quot;>Hostname:</li>
<li style=&quot;text-align: left; background-color: #CCCCCC;&quot;>Domain</li>

2. By declaring float: left; you automatically transform the object in question to a block element and make it ignore the display property. That said, declaring display: inline; in your #tabla li has no effect. Just thought I'd let you know.
 
Upvote 0 Downvote
BillyRayPreachersSon: I'm sorry, I didn't say it, but I have the problem... I tryed with the last code posted, but I have the same problem.

Vragabond: 1. actually, inline styles are working good, I mean color is correct and tex-align is correct.

2. Actually, all attributes are working with float left (and without it), even &quot;height&quot; attribute. My problem is the &quot;height&quot; attribute with IE. Mozilla works ok.

#cabezera ul li {
background-color: #CCCCCC;
font-weight: bold;
height: 30px; <<-- that's the problem with IE
}

I know this is not the best design, but I'm trying to learn it, so if you have another suggest -even completely different- they are very welcome and I'll appreciate them!

After the pages work I'll let it in php because fata must be get from mysql.

Cheers.
 
Upvote 0 Downvote
What you are experiencing is the dreaded box model problem of IE as well as some additional differences in browser behaviour. Mozilla does not expand boxes when you put more text inside, IE however does. The text that spans over two lines thus produces boxes bigger than 30px and as such causes problems. The box model problem is basically different interpretation of the width and height of the boxes. Mozilla follows the standards and takes into account box width, box margins and box border (30px + 2* 5px + 2* 1px = 42px), IE renders all those attributes inside (30px = 2 * 5px padding + 2 * 1px border + 18 remaining width). You can fix that by employing a hack. After your #cabezera ul li declarations, do the following:
Code: 
* html #cabezera ul li {
 height: 42px; /* corrected box size for IE */
 overflow: hidden; /* corrected overflow causing double lined boxed to expand beyond 42 px */
}
The hack is read only by IE, that way it does not mess the output in other browsers.

I would also suggest putting a DOCTYPE in your html as it may help with some of the cross-browser rendering problems. Especially if you code for Mozilla and then check in other browsers.

I personally also think you are displaying a tabluar data and should use a table to do that.
}
 
Upvote 0 Downvote
I agree with Vragabond
I personally also think you are displaying a tabluar data and should use a table to do that.


I've noticed that people jumping on the CSS bandwagen and using divs avoid tables like the plague to avoid designer criticism (&quot;ewe you used a table shame on you&quot;). Keep in mind that displaying tabular data is still a very valid use of tables (hence the term tabular data). What you should be doing is using layers to layout the page as a whole (placing your header, nav, main content etc..). To display stuff like hours of operation(Days | Hours), a shopping cart summary(Item | price | quantity | total price), or rows of information that relate to each other (like you'd see in a database) is perfictly acceptable.

now with that said i have to continue reading posts to find out why my layout looks fine in IE but looks like a jigsaw puzzle in NN. [glasses]

thereptilian120x120.gif
 
Upvote 0 Downvote
Vragabond: Thanks a lot for the explanation!! now I'm clear about that (and the difference on render from mozilla and IE). I did what you suggest and works perferct.

bombboy: Yes, it's a tabular data and I know -now- it could be much better with tables. I will do it with tables, but I was experimenting with CSS in order to know which one is simplest to do it.

Anyway, for tabular data I will continue using tables from now on... but CSS goes!! fastest rendering than tables.

A start for both of you for your help.

BTW, I know nothing about DOCTYPE. what do you suggest me?
 
Upvote 0 Downvote
link vs. @import URL(css)
link for NN.css
@import for IE.css

> need more info?
:: don't click HERE ::
 
Upvote 0 Downvote
sure thing...too much info is never too much ;-)

> need more info?
:: don't click HERE ::
 
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
1K
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
2K
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
1K
PeDa
PeDa
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
375
pendle666
pendle666

Part and Inventory Search

Sponsor

Back
Top