IE7 Row Bug?

Hi,

while working on a new website I came along a, what some might say, IE7 Bug. Now, IE7 is not known for not having any bugs, so this may be not a new issue, but since I read in some forums about people having similar problems, I desided to break to my HTML code and deliver the web a solution for that "bug".

What is it about?
The Website I'm working on has to have a height of 100% of the viewport (at least) and has a header, a sidebar on the left and a content area.
The header must have a specific height, in this example it's 40px, while the other two areas should take the rest of the height available espacially the content area.
To achieve this, I decided to use a layout TABLE (don't tell me ;-), as using DIVs is kind of tricky when you want to use "all the rest of the height" somewhere in the document (if you know better please leave a comment!).

I thought this is straight forward and I wrote the following Markup:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/xhtml+xml; charset=utf-8"></meta>
<title>IE7 Row Bug?</title>

<style type="text/css" media="screen">
html, body, table, td, tr {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
table {
border-collapse: collapse;
}
table td {
vertical-align: top;
}
#bad-layout-table {
width: 700px;
background: #556688;
height: 100%;
}
#bad-layouts-table-header-row {
background: red;
}
#header-menu {
height: 40px;
background: #adad99;
}
#left-items-wrapper-cell {
width: 168px;
background: #fff;
}
#content-wrapper-cell {
padding: 1em;
border-top: 1px dashed white;
height: 100%;
}
</style>
</head>

<body>
<table id="bad-layout-table">
<tr id="bad-layouts-table-header-row">
<td colspan="2" id="header-wrapper-cell">
<div id="header-menu">
The Header Menu in the main row
</div>
</td>
</tr>
<tr id="bad-layouts-table-main-row">
<td id="left-items-wrapper-cell">
<p style="height: 250px;">
Some Info to the left
</p>
</td> <!-- End of left-items-wrapper-cell -->
<td id="content-wrapper-cell">
<h1>Some Dummy Content</h1>
<p style="height:200px">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim
id est laborum.
</p>
</td> <!-- End of iframe-wrapper-cell -->
</tr>
</table> <!-- End of bad-layout-table -->

</body>
</html>

]]>


Me: "Man, that was easy! Give me a more difficult task!"
MS: "No problem dude! Try to make it compatible with IE7!"
Me: "Ohhh shit, I was hoping you wouldn't mention that, but OK, I'll try"

Yes, it works in every standard compliant browser, even IE7 looks good at first but then I realized the scroll bars, where there shouldn't be scroll bars.
It seems, that setting #content-wrapper-cell to height: 100% was no good, as IE7 sets the height to the height of the hole viewport, and that's why I had to scroll for 40px.

Well I'll shorten the story a bit:
What you can do, to give the second row (#bad-layouts-table-main-row) a height of the rest of the screen is the set

#bad-layouts-table-main-row {
height: 100%;
}

And remove the height anotation from #content-wrapper-cell

#content-wrapper-cell {
padding: 1em;
border-top: 1px dashed white;
height: 100%;
}


It's pretty streight forward, but I was wondering, as suddently the header row was heigher than 40px. I thought of padding, margin, some padding/margin defined inside the header, and lot's of other things. People where writing, they have the same problem, with giving some table element a "rest of the screen" height and that the row height seems to be always around some percantage more than it's defined in the css. Have a look at the screenshot with the red row between the header and the content area. This is actually the background of #bad-layouts-table-header-row. Tried lot's of CSS magic on that element.
What I find weird is, that setting height to 100% on the tables cell, makes the cell as high as the screen, but setting the 100% on the table row makes the row as high as the rest of the screen allows.

Now I think I spent enough time documenting this issue. Time to go on ;-)
cu

Problems with scrolling using Google Maps and IE7

Hi,
I'm working on a new web project and had discovered another problem with IE7 browsing a page with a DIV containing a Google Map.
The issue was, that the map did not scroll. The maps container DIV was staying in the same place, while the text, which should be under the map scrolled behind it.

So i searched the web and found some answers. Well, there was one answer present, at least I found just one, which states that, if you have a nested DIV you should set the style position:relative; for that DIV and all anchestors until BODY.

This sounds stupid (no offense intended), but it kind of worked. But I wasn't satisfied with that, so I was trying and trying to get it fixed differently.

Long story short:
In my almost 4 hours searching and trying I found out, that simply deleting the following style anotation solved the problem:body {
font-size: 14px;
background: #fefefe;
overflow: auto;
text-align: center; /* IE hack for centering the main-wrapper */
}Maybe this helps some of you. Please leave me a comment if it did, or if you know why this happens at all.

wish nice coding
Pawel

Firefox for Mac: margin problem with floats

Hi,

another Problem while doing a website. This time Firefox bothered me, but only the Mac version.
The Problem looks like that:
What would you expect with this html and css code

HTML:

...
<body>
<div id="wrapper">
<img id="floated" src="image.png" alt="some image"
height="100" width="80" />
<div id="unfloated">
lorem ipsum dolor sit amet...
</div>
</div>
</body>


CSS:

#wrapper {
width: 400px;

}
#floated {
float: left;
}
#unfloated {
margin-left: 90px;
height: 300px;
overflow: auto;
}


So, what will you expect? It's clear.
An image on the left wich is floated left and has a width of 80px.
The div-box is on the right side of the image with 10px away from it. It has a height set, with overflow auto, so that all text which does not fit in this size will invoke a scrollbar. All that is wrapped in a div which width is set to 400px so that the text which should invoke the scrollbar does not need to be that long.

Ok, this should happen, but in Firefox for Mac you can see another effect. The margin starts at the right edge of the image, which makes the distance between image and div#unfloated 90px instead of 10px. The cause of that behavior is the attribute overflow. Without overflow you have your 10px distance, but then the div#unfloated will be extendet for the text and we don't want to have that.
It's a Bug, and I don't know if it's reported on bugzilla, but here the solution how you can still get your 10px distance.

You have to wrap the div#unfloated in another div box, let's say div#foo. Which has no overlow attribute set. Here the solution:

HTML:

...
<body>
<div id="wrapper">
<img id="floated" src="image.png" alt="some image"
height="100" width="80" />
<div id="foo">
<div id="unfloated">
lorem ipsum dolor sit amet...
</div>
</div>
</div>
</body>


CSS:

#wrapper {
width: 400px;

}
#floated {
float: left;
}
#foo {
margin-left: 90px;
height: 300px;
}
#foo #unfloated {
margin-left: 0;
}
#unfloated {
margin-left: 90px;
height: 300px;
overflow: auto;
}


This should work just fine. The definition "#foo #unfloated" is, because I don't want to always wrap the div#unfloated box, but when it's floated, then the left margin should be set to "0".

Hope it helps someone out there.

greez

Centering verticaly part 2

Hi,
pitty, but the last attempt did not work with IE7.
A quick hack is presented here. The body[id] syntax was dropped, as IE7 does understand and the css definitions are seperated, where one part is in the well known conditional comment, understood just by IE.

<!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" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Verticaly and horizontaly centering</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
html {
overflow: hidden;
}
body {
text-align: center; /*horizontal center in IE*/
}
body[id] {
display: table;
}
#table {
position: absolute;
top: 50%;
left: 50%;
}
#table[id] {
position: static;
display: table-cell;
vertical-align: middle;
}
#cell {
text-align: left;
background: #9f9;
position: relative;
top: -50%;
left: -50%;
height: 300px;
width: 500px;
overflow: auto;
margin: 0 auto 0 auto;
padding: 0.5em;
}
#cell[id] {
position: static;
}
</style>

<!--[if IE]>
<style type="text/css">
#table {
position: absolute !important;
display: block !important;
}

#cell {
position: relative !important;
}

</style>
<![endif]-->

</head>
<body id="body">
<div id="table">
<div id="cell">
<p>The div box with the green background ist now centered verticaly and horizontaly in IE lte 7 and Firefox<br/>
The css definitions had to be made conditioned for IE. The old solution with syntax like <b>body[id]</b> does not work with IE7, as the trick was that IE does not understand this syntax, but IE7 does.<br/>
Probably there is a finer solution to this, but as I got no time now, I can't experiment with that stuff.<br/>
This attempt, however, works just fine.
<br/>
And if we put some more text in this div, we will have a scroll bar just for this one.<br/>
I also added some padding to this div, just to look a little better.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</body>
</html>

Centering verticaly

Hi,

I was searching for that stuff some years ago, but there was no option to center a div in the body verticaly in those times.
But know there is a nice solution, at least a solution, to make this formating.
I had tome hints from here.

<!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" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Verticaly and horizontaly centering</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
html {
overflow: hidden;
}
body {
text-align: center; /*horizontal center in IE*/
}
body[id] {
display: table;
}
#table {
position: absolute;
top: 50%;
left: 50%;
}
#table[id] {
position: static;
display: table-cell;
vertical-align: middle;
}
#cell {
text-align: left;
background: #9f9;
position: relative;
top: -50%;
left: -50%;
height: 300px;
width: 500px;
overflow: auto;
margin: 0 auto 0 auto;
padding: 0.5em;
}
#cell[id] {
position: static;
}
</style>
</head>
<body id="body">
<div id="table">
<div id="cell">
<p>The div box with the green background ist now centered verticaly and horizontaly in IE lte 6 and Firefox<br/>
The css definition like <b>body[id]</b> mean: every body element with an id attribute.<br/>
This will not be interpreted by the IE lte 6, so we can use this syntax to make different definition for IE, and the rest of the browsers.
<br/>
And if we put some more text in this div, we will have a scroll bar just for this one.<br/>
I also added some padding to this div, just to look a little better.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</body>
</html>

Internet Explorer Probleme CSS

Hi,

hab gerade an einer Webseite herumgebastelt und bin auf etwas komisches gestoßen:
Aus einem mir zunächst unbekannten Grund konnte ich manche Links im Internet Explorer nicht anklicken. Das Problem war, wie ich festellte folgendes:
Ich habe zwei CSS Dateien, eine main.css und eine main_ie.css. Letztere wird nur vom IE < 7 eingelesen. Alle nicht anklickbaren Links waren innerhalb einer DIV-box mit der id "content-wrapper".
Diese DIV-box hat nun folgende CSS Attribut-Wert Paare:
/* main.css */
#content-wrapper {
border: 1px solid #b55659;
margin-left: 160px;
background: url(../des_imgs/content_background.png) no-repeat;
background-position: top right;
padding: 1em;
min-height: 300px;
width: auto !important; /*IE6 hack*/
width: 100%; /*IE6 hack*/
}

/* main_ie.css */
#content-wrapper {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../des_imgs/content_background.png', sizingMethod='scale');
}

Ist der Microsoftfilter drin, sind die Links nicht anklickbar. Ich hatte den Filter benutzt um ein PNG mit Alphatransparenz anzuzeigen, da der IE das Standardmäßig nicht kann.

Lösung:
Naja, ich habe das Problem nicht wirklich gelöst. Da ich mit der Fehlersuche schon genug Zeit verplempert habe, hab ich das PNG in ein JPG mit weißem Hintergrund umgewandelt und dieses dann benutzt.
Das hier ließt wahrscheinlich fast keiner, aber falls doch jemand eine Lösung hat, würde mich das sehr freuen :-)