CSS - Strange Line-height Behavior In Ie (win)

Hello there. I'm afraid I can't provide a live example because it's a complicated commission that hasn't yet been published, but I'll try to be as specific and detailed as possible.

My overall aim: To have a squarish div on the left hand side and a few short rectangular divs vertically stacked on the right hand side of a container. The container is a div whose width is known. The stacked rectangles must have a minimum width but there is some margin for error. All these divs are separated by margins.

Code:

OOOO  ===
OOOO 
OOOO  ===
OOOO
OOOO  ===

There are other, unrelated blocks above and below this arrangement, and there are blocks nested within these divs as well, all unrelated though.

So how did I implement this? I figured this was simple enough:

Code:

<div>
  ...
  <div class="left-square">...</div>
  <div class="right-short-rectangle">...</div>
  <div class="right-short-rectangle">...</div>
  <div class="right-short-rectangle">...</div>
  ...
</div>

And the CSS would then look something like this:

Code:

.left-square {
  width: 100px;
  height: ...px;
  float: left;
}

.right-short-rectangle {
  margin-left: 110px;
  margin-bottom: 5px;
  height: ...px;
}

So, this works just fine in Firefox and Internet Explorer. However, for some reason, Chrome doesn't like it. What Chrome does is, it completely ignores the margin on the right-short-rectangles, placing them underneath the floating left-square, but giving them the correct width (the width of the container minus the margin).

By fooling around with the DOM inspector, I discovered that if I remove the margin attribute from one of the rectangles, they show correctly (in Chrome). However, they obviously will break in Firefox and Internet Explorer if I do that. Also, if I remove the float attribute from the square, Chrome suddenly recognizes the margins of the rectangles properly (when it no longer matters).

So, does anyone have any idea about what's going on here?

EDIT: I just noticed this and it is certainly relevant: The right-short-rectangles contain a few *unstyled* divs and one div that is floated to the RIGHT (in other words, content I want to have on the right hand side of each of these rectangles). Without this inner, right-floated div, the margin issue no longer happens in Chrome. The inner div is, however, essential. What can I do? Use tables?

I have a big div container. In this container, I put my content - mostly text. I have a nested div in this container that floats a "sidebar" to the upper-left corner of the container. The sidebar is set up to allow text in the container to fill in around the bottom half of the side bar if the sidebar is shorter than the length of the container.

My problem occurs when I have an unordered list as part of my content. If I have an unordered list sitting to the right of the sidebar, the bullets of the list sit immidiately on the right the left of the sidebar (with no indenting). Below the sidebar, all bulleted lists starts indenting from the left of the container, as expected.

One solution would be to put my content in it's own div, that would be completely separate from the sidebar div. However, if I do this, my content won't fill in around the bottom of my sidebar.

Any advice? Thanks!
- Ryan

Hi all,

I'm building my first experimental CSS site, and I'm trying to attain accessibility for the widest array of users. While testing various browser settings, I came across this issue.

(I'm looking at the site in IE, as I'm at work. I'll be able to look it over in other browsers when I get home.)

When my site is viewed with text set to "Medium," everything appears fine:

http://www.flickr.com/photos/251449...in/photostream/

When my site is viewed with text set to "Larger," the text in the middle left section doesn't fit:

http://www.flickr.com/photos/251449...in/photostream/

Fair enough. But here's what has me stumped: when the site is viewed with the text set to "Largest," it fits again:

http://www.flickr.com/photos/25144998@N00/4997174984/

I've learned alot very quickly in the last week or so, but this really has me over a barrel. Any ideas?

CSS

Code:

body
{
background-color: #393939;
font-family: sans-serif;
font-size: 100%;
margin: 0;
padding: 0;
}

.header
{
text-align: right;
font-weight: bold;
font-size: 1.6em;
}

.clickables
{
text-align: right;
font-weight: bold;
font-size: 0.95em;
}

.content
{
text-align: right;
font-size: .8em;
}

.navbutton
{
float: right;
width: 5em;
background-color: #ffcc00;
color: #666666;
height: 1em;
text-align: right;
font-weight: bold;
font-size: 0.95em;
margin: .75em 0.2em .75em 0em;
}

#mother
{
margin-left: auto;
margin-right: auto;
min-width: 720px;
max-width: 1000px;
width:expression(document.body.clientWidth > 1000? "1000px": "auto" );
width:expression(document.body.clientWidth < 500? "500px": "auto" );
}

#UpperLeftWrapper
{
float: left;
width: 35%;
background-color: #7d7d7d;
}

#UpperLeft
{
height: 8em;
margin: 0;
background-color: #7d7d7d;
}

#UpperRightWrapper
{
float: right;
width: 65%;
background-color: #666666;
}

#UpperRight
{
float: right;
width: 7em;
height: 7em;
margin: 0;
padding: .5em;
background-color: #666666;
color: #ffcc00;
}

#MiddleLeftWrapper
{
float: left;
width: 35%;
background-color: #ffd426;
}

#MiddleLeft
{
float: right;
width: 8em;
height: 1.2em;
color: #7d7d7d;
background-color: #ffd426;
margin: 0;
padding: 0.6em;
}

#MiddleRightWrapper
{
float: left;
width: 65%;
background-color: #ffcc00;
}

#MiddleRight
{
float: right;
width: 24.85em;
height: 2.45em;
background-color: #ffcc00;
margin: 0em .6em 0em 0em;
}

#LowerLeftWrapper
{
float: left;
width: 35%;
background-color: #e5e5e5;
}

#LowerLeft
{
float: right;
width: 5.8em;
height: 75em;
color: #7d7d7d;
background-color: #e5e5e5;
padding: 0.7em;
}

#LowerRightWrapper
{
float: left;
width: 65%;
background-color: #ffffff;
}

#LowerRight
{
float: right;
height: 88em;
color: #666666;
background-color: #ffffff;
padding: 0.8em 1.1em 2em 2em;
}

HTML

Code:

<!DOCTYPE html>
<HTML>
<HEAD>
<META CHARSET="UTF-8">
<title>layout three</title>
<link rel="stylesheet" type="text/css" href="comp.css" />
</HEAD>
<BODY>
<div id="mother">

	<div id="UpperLeftWrapper">
		<div id="UpperLeft" class="header">
		</div>
	</div>
	<div id="UpperRightWrapper">
		<div id="UpperRight" class="header">
		<p>demonstration<br>layout<br>number two</p> 
		</div>
	</div>

		
	<div id="MiddleLeftWrapper">
		<div id="MiddleLeft">
		  <div class="clickables">
		  <p>additional reading</p>
		  </div>
		</div>
	</div>
	<div id="MiddleRightWrapper">
		<div id="MiddleRight">
		  <div class="navbutton">
		  <p>tab one</p>
		  </div>		  
		  <div class="navbutton">
		  <p>tab two</p>
		  </div>
		  <div class="navbutton">
		  <p>tab three</p>
		  </div>
		  <div class="navbutton">
		  <p>tab four</p>
		  </div>
		  <div class="navbutton">
		  <p>tab five</p>
		  </div>
		</div>
	</div>

	<div id="LowerLeftWrapper">
		<div id="LowerLeft" class="clickables">
		  <p>
		  first link<br>
		  second link<br>
		  third link<br>
		  fourth link<br>
		  fifth link<br>
		  sixth link<br>
		  seventh link<br>
		  eighth link<br>
		  </p>	
		</div>
	</div>
	<div id="LowerRightWrapper">
		<div id="LowerRight" class="content">
		  <p>
		  Body content here...
		  </p>
		</div>
	</div>

</div>
</BODY>
</HTML>

Thanks in advance for any advice!

I haven't seen this one before. And I can't for the life of me figure out what could be causing this.
Take a look at This Page
To see what I'm talking about, you'll need to view it in a good browser first (Mozilla, Netscape, Opera) Then look in IE.
Basically there's an H3 that also serves as a link to my RSS Feed page.
You don't see it in IE unless you actually hover the mouse over it. Even then, if you move the mouse over the menu on the left, the heading disapears again. At first I thought it could be because it was a heading, but on another page a regular link does it too.
I've got two stylesheets, and it does it on both.
Any thoughts or suggestions?
Here's the main stylesheet

Hello,

I am having an issue with some background images. Ive finally decided on a method to create my rounded corners. I am using three divs, a top bottom and center content div.

The top and bottom divs have a background image for the top and bottom portions of the curved box. The center div contains the content and a background image repeating along the x-axis. Problem is, the image repeating stops just shy of the top and bottom images. Is there a way to solve this? When I place a border around the center div, the repeating image portion suddenly fills in the gaps, which I don't quite understand.

Here is a link to a development area where I am displaying the problem: http://www.ioforge.com/ezt-example/index.html

Hi there.

I have a blank space that appears as a link when my animated T-R MENU button is clicked.

Click here to view the problem

It didn't do this in the last version of FF... I can't see why it's doing it, there aren't blank spaces in the code to make it behave this way.

Opera, Safari and IE view it fine. Just FF3 that's doing it.

Can anyone shed some light on why it's doing this or how to fix it?

Thanks in advance.

Hello to all,
I have a problem of compatibility when using Safari (V3).
I have a strange interface and i can't identify the problem. When I refresh my page,I don't have the same css !!!!
The same interface is testing wit hFirefox and IE and it's ok.
Can you help me please.
Thank you in advance for your time.

Hi all,

I am trying to automate everything on my test website and I have one more angle to cover.

In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height.

Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder)

My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement.

Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values?

I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit.

Whew!

I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks!

Greetings,

I have a class called "header" and I am trying to give it a touch of extra space between it and the next line.

All of my headers are just a few words and thus on one line. I tried placing "line-height: 1.5em" in my "header" class and it shows up correctly in Dreamweaver but not in IE. My thought is, because it is only a single line, that class value does not kick in because there is no second line for that class.

Is there a way to conrol this in CSS or am I going to have to resort to using a....gulp.....spacer?

Thanks in advance!

Alright, I've got a really strange problem going on. I've recently redesigned my weblog to be more standards-compliant, and I've copied the modifed Fahrner Image Replacement technique that Zeldman is using on his site. You can see on his site that the H1 is shoved off-page with a negative text-indent, and the background is applied to the A tag inside the H1, which allows the header image to still be "clickable." I was able to successfully duplicate this behavior using the following code.

Code:

XHTML:
<div class="header">
  <h1><a href="/">Space Ninja Blog</a></h1>
  <p class="tagline">site tagline here.</p>
</div>


STYLESHEET:
p.tagline {
    display: none;
    }
h1 {
    text-indent: -9999px;
    margin: 0;
    padding: 0;
    border: 0;
    }
h1 a:link, h1 a:visited, h1 a:hover {
    display: block;
    width: 650px;
    height: 150px;
    background: #777 url(/blog/css/images/wa_st_header.jpg) top left no-repeat;
    margin: 0;
    padding: 0;
    border: 0;
    }

Now, that is the same code that Zeldman uses, and it works fine in all the modern browsers I've tested in except one: In Mozilla Firefox on XP, I get a strange purple line extending from the header image offscreen. This is clearly the link outline or underline, since if I click on the header image, the purple turns red, and it's extending towards where the H1 text has been shoved offscreen.

My problem is that this doesn't happen on Zeldman's site, and for the life of me, I can't see what the difference is. Hell, we're even using the same doctype, and we're both importing our stylesheets. But I get this weird line, and he doesn't.

Note also that the line doesn't show up in any other browser I've tested, even Firefox on my Mac.

Any suggestions are welcome!

Like I said in a previous post, I'm taking over design of a project that was abandoned. I'm nearly complete, except my site won't show in IE. I found this line of code to be the reasoning, and I cannot for the life of me figure out what this line is attempting to do. I can't parse it. This might be in the wrong forum section, I'm not entirely sure.

Code:

<div style="z-index: 2;" class="yui-module yui-overlay yui-tt" id="preview-tooltip-nws"><div class="bd"></div></div><div style="z-index: 2;" class="yui-module yui-overlay yui-tt" id="preview-tooltip-ws"><div class="bd"></div></div><iframe style="position: absolute; visibility: visible; width: 10em; height: 10em; top: -134px; left: -134px; border-width: 0pt;" id="_yuiResizeMonitor" src="data:text/html;charset=utf-8,%3Chtml%3E%3Chead%3E%3Cscript%20type%3D%22text%2Fjavascript%22%3Ewindow.onresize%3Dfunction%28%29%  7Bwindow.parent.YAHOO.widget.Module.textResizeEvent.fire%28%29%3B%7D%3C%2Fscript%3E%3C%2Fhead%3E%3Cb  ody%3E%3C%2Fbody%3E%3C%2Fhtml%3E"></iframe>

Hope this is a simple prob for you css gurus. This time I can just direct you to a public site http://tixrus.us

Attention to the "On Sale Now" list at the left, I chose a small font to list the dates. I would like that teaser of the next 5 events in chron to be a little more compact. I have tried setting the line-height directly but nothing seems to change. I used style= in the source so it will be easy to find it. How can I make those more compact. Also the client list and the text in the search box.

Thanks!

Hope this is a simple prob for you css gurus. This time I can just direct you to a public site http://tixrus.us

Attention to the "On Sale Now" list at the left, I chose a small font to list the dates. I would like that teaser of the next 5 events in chron to be a little more compact. I have tried setting the line-height directly but nothing seems to change. I used style= in the source so it will be easy to find it. How can I make those more compact. Also the client list and the text in the search box.

Thanks!

I'm having trouble making the line-height work the way I want to in IE.

I set the line-height of the outer container to this tag cloud to 24px, yet on IE it doesn't seem to be working. Any Ideas?

Check it out.
http://gifdump.com/tags/

Viewed on Firefox


Viewed on IE