Text flows above div in IE (paging centauri lol)

[qwik3r]

Where is my night in shining armor for this one?

http://www.mantismediausa.com/test check it out in FF the div pushes the footer down, in IE goes behind it, ugh. I know i screwed something up when i was messing with all of this.

P.S. Excuse the bad coding practices, learning and sometimes i leave more things in then i need to just to come back to it later

[WebJoel]

#footer {font-size: 10px; clear: both; padding: 5px 0 10px;height: 88px; border-top: 3px solid #FF6600;
display: block; background-color: #333333; color: #FFFFFF; margin-top: -106px;} This is the problem. IE 'disobeys' this and displays the way it thinks you want it to. Firefox on the other hand, complies, and slides your footer 'up' the 'negative' 106-pixels, occluding the content 'above' #footer with itself. Simply remove "margin-top:-106px;" and see what happens.

I would rethink this:<ul id="icons_holder">
<li id="cake">
<h3 id="thinkit"></h3>
p>Cakey may look pink and fluffy, but under that soft exterior beats a passionate heart.</p>
</li>.... You're trying to insert a 'block level element' (albeit, an empty one which will throw a warning upon validation anyway), into a 'inline element' (the <li>).
I'd write it:<ul id="icons_holder">
<li id="cake">
<span id="thinkit"><!-- --></span>
<p>Cakey may look pink and fluffy, but under that soft exterior beats a passionate heart.</p>
</li> :)

To help get your fonts displaying the same size in other browsers, you should set a 'default font-size' in BODY, HTML, then set another BODY {font-size:foo;} to adjust to size that you really want.

<style type="text/css">
/* StyleSheet by David Herreman http://www.free-css-templates.com*/

html, body {height: 100%;
font-size:100%; /* this sets 'all font-sizes' to their respective maximun, thus future font-size is started from 'common resizement' and helps to prevent font-size disparities in other browsers */
}

body {padding: 0;margin: 0; font-size:foo; etc... /* <-- re-sized font that you want to use */.

-Does this make any sence? Some people prefer to state "font-size:90%;", others say "font-size:101%;", but starting with an all-governance re-sizing and then, size again for the true size that you want. This is supposed to help make those weird font-size differences from browser-to-browser less of a problem. :o

[qwik3r]

Thanks for the response Joel, always a pleasure. Scratch this thread now because I just realized that this box is not going to ever hold any more content it only needs to push down the any content under it upon expanding with font resizing. As you know, I am trying to redo this is a liquid elastic layout. What does concern me is the way that the text and images are setup, is there a better way to have done this? I used a technique from the book transcending css, hence the odd names like cake lol - i originally had text to the right of each icon, however it did not look even so i decided to move the text underneath in an effort to make the icons look spread out evenly. For some reason using the inline images I could not get this to work properly the paragraphs were making the box extremely too big pushing it down, do you think just leaving it with spans and background images is considered semantic? Thanks

-r

[Centauri]

Where is my night in shining armor for this one?
The armour is rusty...... and the night was restless.......:cool:

The key to getting a footer to sit no higher than the screen bottom is to reference it to an element that is at least as high as the screen. In this case #wrapper needs a minimum height of 100%, but as IE6 doesn't understand min-height, then it needs to be fed height:100% through a hack. As the negative top margin of the footer pulls it back over the bottom of #wrapper, you need to ensure that there is no content there. A bottom margin on #content2 equal to the height of the footer will achieve this.

I also tidied up some of the coding around the icons - various unnecessary floats and relative positioning was causing a lot of problems, hence the 20% width needed to make 3 elements fit......

Also, why are you using xhtml doctype? As in another thread on this forum, there is not much use using anything other than html 4.01 strict.

Anyway, html I came up with is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mantis Media</title>
<link rel="stylesheet" type="text/css" href="style1_30_07.css" media="screen">
<!--[if lte IE 7]>
<link rel="stylesheet" href="filter.css" type="text/css"
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>
<div id="wrapper">
<div id="header">
<div id="logo"></div>
</div><!--end header-->

<div id="content2">
<div class="roundcont">
<div class="roundtop"></div>

<ul id="icons_holder">
<li>
<h3 id="thinkit">Think It</h3>
<p>Cakey may look pink and fluffy, but under that soft exterior beats a passionate heart.</p>
</li>
<li>
<h3 id="buildit">Build It</h3>
<p>Cakey may look pink and fluffy, but under that soft exterior beats a passionate heart.</p>
</li>
<li>
<h3 id="getit">Get It</h3>
<p>Cakey may look pink and fluffy, but under that soft exterior beats a passionate heart.</p>
</li>
</ul><!--end icons holder-->


<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras condimentum suscipit nibh. Nam dictum, ipsum non interdum dignissim, odio felis nonummy lorem, quis consectetuer lectus nunc eu pede. Nunc fringilla consequat felis. Duis vestibulum aliquam sapien. Praesent volutpat massa sagittis nisl. Vestibulum elementum mattis velit. Nunc vel tellus in elit interdum porttitor. Ut est. Ut euismod, lacus sed condimentum commodo, nibh lorem ultricies velit, ut pretium massa orci a felis. Suspendisse fringilla quam quis dui.</p>

<p>Vestibulum tincidunt lorem. Nam porttitor iaculis ante. Proin tempor mattis odio. Integer tristique tempor risus. Nam bibendum libero eu nibh. Nunc lacinia leo sed ligula. In orci enim, venenatis vitae, pharetra eget, ornare vel, erat. Donec elementum malesuada turpis. Proin non tellus. Nullam fringilla, nisl vel feugiat dapibus, nulla mauris ullamcorper arcu, viverra venenatis augue turpis ac tortor. Phasellus lectus nisi, tincidunt id, feugiat vel, dictum sed, orci. Mauris scelerisque justo et arcu. Vestibulum magna lectus, rutrum eu, sodales in, tempus vitae, elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras condimentum suscipit nibh. Nam dictum, ipsum non interdum dignissim, odio felis nonummy lorem, quis consectetuer lectus nunc eu pede. Nunc fringilla consequat felis. Duis vestibulum aliquam sapien. Praesent volutpat massa sagittis nisl. Vestibulum elementum mattis velit. Nunc vel tellus in elit interdum porttitor. Ut est. Ut euismod, lacus sed condimentum commodo, nibh lorem ultricies velit, ut pretium massa orci a felis. Suspendisse fringilla quam quis dui.</p>

<p>Vestibulum tincidunt lorem. Nam porttitor iaculis ante. Proin tempor mattis odio. Integer tristique tempor risus. Nam bibendum libero eu nibh. Nunc lacinia leo sed ligula. In orci enim, venenatis vitae, pharetra eget, ornare vel, erat. Donec elementum malesuada turpis. Proin non tellus. Nullam fringilla, nisl vel feugiat dapibus, nulla mauris ullamcorper arcu, viverra venenatis augue turpis ac tortor. Phasellus lectus nisi, tincidunt id, feugiat vel, dictum sed, orci. Mauris scelerisque justo et arcu. Vestibulum magna lectus, rutrum eu, sodales in, tempus vitae, elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras condimentum suscipit nibh. Nam dictum, ipsum non interdum dignissim, odio felis nonummy lorem, quis consectetuer lectus nunc eu pede. Nunc fringilla consequat felis. Duis vestibulum aliquam sapien. Praesent volutpat massa sagittis nisl. Vestibulum elementum mattis velit. Nunc vel tellus in elit interdum porttitor. Ut est. Ut euismod, lacus sed condimentum commodo, nibh lorem ultricies velit, ut pretium massa orci a felis. Suspendisse fringilla quam quis dui.</p>

<p>Vestibulum tincidunt lorem. Nam porttitor iaculis ante. Proin tempor mattis odio. Integer tristique tempor risus. Nam bibendum libero eu nibh. Nunc lacinia leo sed ligula. In orci enim, venenatis vitae, pharetra eget, ornare vel, erat. Donec elementum malesuada turpis. Proin non tellus. Nullam fringilla, nisl vel feugiat dapibus, nulla mauris ullamcorper arcu, viverra venenatis augue turpis ac tortor. Phasellus lectus nisi, tincidunt id, feugiat vel, dictum sed, orci. Mauris scelerisque justo et arcu. Vestibulum magna lectus, rutrum eu, sodales in, tempus vitae, elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras condimentum suscipit nibh. Nam dictum, ipsum non interdum dignissim, odio felis nonummy lorem, quis consectetuer lectus nunc eu pede. Nunc fringilla consequat felis. Duis vestibulum aliquam sapien. Praesent volutpat massa sagittis nisl. Vestibulum elementum mattis velit. Nunc vel tellus in elit interdum porttitor. Ut est. Ut euismod, lacus sed condimentum commodo, nibh lorem ultricies velit, ut pretium massa orci a felis. Suspendisse fringilla quam quis dui.</p>

<p>Vestibulum tincidunt lorem. Nam porttitor iaculis ante. Proin tempor mattis odio. Integer tristique tempor risus. Nam bibendum libero eu nibh. Nunc lacinia leo sed ligula. In orci enim, venenatis vitae, pharetra eget, ornare vel, erat. Donec elementum malesuada turpis. Proin non tellus. Nullam fringilla, nisl vel feugiat dapibus, nulla mauris ullamcorper arcu, viverra venenatis augue turpis ac tortor. Phasellus lectus nisi, tincidunt id, feugiat vel, dictum sed, orci. Mauris scelerisque justo et arcu. Vestibulum magna lectus, rutrum eu, sodales in, tempus vitae, elit. </p>

<div class="roundbottom">
<img src="images/gr_bl.png" alt="">
</div>
</div>
</div>
<!--end content 2-->
</div><!--end wrapper-->

<div id="footer"></div>



</body>
</html>

And your style1_30_07.css is * {
border: 0;
margin: 0;
padding: 0;
}
html {
height: 100%
}
body {
font: 10px Arial, sans-serif;
line-height: 2em;
background: #fff url(images/header_bg2.jpg) repeat-x;
color: #454545;
line-height: 2em;
height: 100%;
}
p {
padding: 10px 0;
}
a { color: #DA3B3B; background: inherit; }
a:hover { color: #DA3B3B; background: inherit; text-decoration: underline}
h1 {
Font-family: "Trebuchet Ms", Tahoma, Verdana, Sans-Serif;
font-size: 2em;
color: black;
}
#logo {
background: url(images/logo.png);
background-repeat: no-repeat;
width: 198px;
height: 99px;
float: left;
}
.emph {
color: #000;
font-weight: bold;
background-color: #ffff99;
}
#wrapper {
margin:0 auto;
width: 85%;
max-width: 979px;
min-height: 100%;
}
* html #wrapper {
height: 100%;
}
#icons_holder {
display: block;
width: 100%;
list-style: none;
}
#icons_holder li {
float : left;
width: 33%;
}
#icons_holder h3 {
width: 131px;
height: 180px;
position: relative;
margin: 0 auto;
font-size: 1px;
text-indent: -1000px;
}
#icons_holder p {
padding: 10px 15px;
}
#thinkit {
background-image: url(images/thinkit.png);
}
#buildit{
background-image: url(images/buildit.png);
}
#getit{
background-image: url(images/getit.png);
}
#content2{
background: #fff url(images/bg4.png) repeat-x top left;
margin-bottom: 106px;
}
#content2 p {
margin: 0 10px;
}
#footer {
font-size: 10px;
clear: both;
padding: 5px 0 10px;
height: 88px;
border-top: 3px solid #FF6600;
display: block;
background-color: #333333;
color: #FFFFFF;
margin-top: -106px;
}
#header {
height: 106px;
}
.roundcont {
background: #669966 url(images/gr_grad.png) repeat-x;
background-repeat: repeat-x;
color: #fff;
display: block;
}
* html .roundcont
{
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/gr_grad.png", sizingMethod="scale");
}



/*
.roundtop {
display: block;
height: 15px;
background: url(tr.gif) no-repeat top right;
}
*/
.roundbottom {
background: url(images/gr_br.png) no-repeat bottom right;
display: block;
height: 15px;
}
.roundbottom img {
display: block;
}


Note that I globally zeroed out browser default margins / paddings etc at the start of the css, so all those other zeros are not needed.

Cheers
Graeme

[Centauri]

You're trying to insert a 'block level element' (albeit, an empty one which will throw a warning upon validation anyway), into a 'inline element' (the <li>).

I've never had a problem with that, and the code I posted above (which retains the <h3> tags within the <li>s, although they are not empty now for semantic reasons), validates fine.

Cheers
Graeme

[WebJoel]

I've never had a problem with that, and the code I posted above (which retains the <h3> tags within the <li>s, although they are not empty now for semantic reasons), validates fine.

Cheers
Graeme You know, -you just might be right. If it is the 'title' of the container, it is block-level for the element and okay. If the <h></h> comes after <ul> but before <li>, -it throws the error ("missing expected <li>" etc). That might be what I was thinking of (I had just encountered a post like that earlier).

[WebJoel]

....Scratch this thread now because I just realized that this box is not going to ever hold any more content it only needs to push down the any content under it upon expanding with font resizing. ... If that is it, then yeah. I'd need to look again. I saw that in IE, the content was okay, and there was a footer. In Fx, it was covered by footer (or other way around? do not recall now). The negative-margin alone would account for that.
Still can be fluid. Id just make both 'relative', same width, and centered, and adjust postioning to 'just touch', -creating effect of being one. Expandable that way, yet, seperate.

Away from pc for the day... back this evening.

[qwik3r]

I've never had a problem with that, and the code I posted above (which retains the <h3> tags within the <li>s, although they are not empty now for semantic reasons), validates fine.

Cheers
Graeme


I grabbed the coded that used the h3 for image floating from the book Transcending CSS for one of the examples is really what I was looking for. However I have since decided that the icons may be a bit too big and take up too much real estate so I think i'm going to shrink them down and put text blocks to the right of each and space them out evenly i'm sure i'll have a problem with that because i'm a newb moron haha.

[qwik3r]

If that is it, then yeah. I'd need to look again. I saw that in IE, the content was okay, and there was a footer. In Fx, it was covered by footer (or other way around? do not recall now). The negative-margin alone would account for that.
Still can be fluid. Id just make both 'relative', same width, and centered, and adjust postioning to 'just touch', -creating effect of being one. Expandable that way, yet, seperate.

Away from pc for the day... back this evening.

Hey Joel -

I forgot that the green box is more or less an unofficial header/welcome message that will not house any more content, but what is below it will and that will need to expand and push the footer down accordingly.

[qwik3r]

Graeme, Thanks for chiming in, wondering where you were haha. Thanks for the fixing and also the note on the doctype, sometimes I still don't use the correct one, or i'll experiment which leads to less the optimal results. I think i'm going to make a thread that says "qwik3r's help thread" and just TTT everytime i need a hand from you 2 wiz kids (not that your kids or anything lol) and put you guys on a monthly payroll. How's that sound? lol.

Anyway do you guys know about Qunu(.com)? I'm not advertising but i just discovered this service and its pretty cool. Basically its a service where you search for what you need help with and if someone is online that has tagged themselves with being able to know that services and their willing to help you in realtime you can assist via an IM program or the webpage itself.

For instance I signed up as an expert (although u don't have to be) and in doing so i use the Miranda IM client or any other jabber enabled IM client and when i sign on the bot puts me on the website so if someone searches for "css" i'm tagged with that they can opt to chat with me if i accept we can talk realtime. Its pretty cool, check it out.

[qwik3r]

Ok TEAM lol - http://www.mantismediausa.com/test/ check it out i worked some things around so the scaling wasn't all messed up if someone changed the text. I am also using a javascript for the rounded corners on the green box, does it work ok on your side(s)?

I was wondering why IE and FF don't understand percentages the same way. For instance i set the width on icon_holder p to 100% and in FF it works in IE it drops the P element underneath image. I wasn't comfortable adding a fixed PX since i'm trying to keep this thing liquid so gave the P a % with the html star hack for IE. Now IE got it right at 60% so where the hell does that extra 40% of space go between FF and IE? Confusing.

r

[WebJoel]

Screenhunter_1 shows what I am seeing, using editplus2. It shows 'like IE' although when using Firefox I switch to IE-View, and it looks a little bit better than this. Note how your beautiful *png is being raped by IE's inability to handle alpha-transparency. -The baby-blue background is not too nice, huh? :o

I am still getting your images and referanced external files referanced 'absolute' so that they would work for me, from my desktop. Note, -it is easier to test these things if every image, every file be they *css, *js, etc, every source that builds the page, is referanced 'absolute path'. I don't care about links whether they are 'absolute path' or 'relative path', -I'm not testing those. :rolleyes:

Currently, I am trying to see what is causing those little squares with the "X" in them on my html-editor... I might have some image not referanced 'absolute path' still, and the editor merely shows that there is an image placeholder in it's absence..

back:

It seems as if the *js that makes the *png appear here without the 'baby blue background' is causing this [X] thingie... I am sort of out of ideas here.

[qwik3r]

those X's are pixel.gif they are used for inline images, checkout the HTML source you'll see the png javascript right after the body tag, so download images/pixel.gif

You may want to refresh the page again - in your screen shot the text blocks are below the images, which is no good, at 1024x768 i reduced the percentage of the paragraph to 50% and it works now in IE but i'm not sure at a higher resolution since my crap monitor only goes to 1024 at home, attached is a screen shot.

Also can you do me a favor and instead of viewing it in editplus view in ie6 and confirm whether or not the rounded corner javascript box shows up immediately or if it hesitates, my IE is a PITA and sometimes the box doesn't want to even show up it just keeps messing up. If it does it it to you i'll just switch back to using the mountaintop corners technique instead of the jscript.

check attachment now let me know how everything works out on your end guys thanks.

[WebJoel]

Checked again. Visually, on Firefox 2.0.0.1 and Fx's "IE-View" (which is IE6.0), they two look almost 100% identical. Just a small changes in font-size (and this can be remidied too, if it becomes a problem).

I probably should have mentioned regarding how my offline editor "editplus2", views your page, it probably shows the work circa-IE5.x, and as we know, IE6 was 'an improvement' over earlier versions. That is why the "Firefox IE-view" looks a little bit better.
I do note that the three images and accompanying text-containers no longer 'overlap' each other. Difficult to explain and I was unable to capture a screenshot of this because when I 'click & drag', I can highlight the container(s) and image(s), but when I then click the 'take a snapshot' function, the focus is removed from the 'click&drag' and the highlight is lost to the captured image..
You seem to have fixed that. I noticed that the *png logo in IE6 looks okay too.

-I looked at your code again, -yes, -I did miss that javascript thingie right after the opening <body> tag. What does that do? I am not too excellent with javsacript so cannot quite understand the function.

[qwik3r]

Joel - so all looks good now between the browsers? Can others confirm? Graeme?

As for the javascript function is used for inline images, basically all of these things use the same object, the alphaimageloader to parse the PNG. What this does is it uses pixel.gif to virtually display itself all over the image then the alphaimageloader parses that and you wind up with a transparent image. There are other methods that do no require this procedure which I am looking into. Unfortunately you have to use 2 different methods for background and inline images.

Anyway if you can use your screen hunter to take a FULL SCREEN shot and attach it in firefox's IE 6 window that would be great. Just out of curiosity do you not have IE 6 installed on your comp? I don't know how much i trust the ie6 render in FX, I still like to look at my page in IE itself. Thanks Joel, ttyl

r

[Centauri]

Still a slight difference - in IE6, the menu seems to be cut off at the left, and the width of the 3 paragraphs next to the items is narrower - and both these areas have IE6 hacks.... With a few changes, though, and the REMOVAL of the hacks, everything is ok.

First the menu. Removing the width value from the <ul> meant white-space setting was not required. The text-align was also removed from here and moved to the <a> elements as it affected the overall structure. The <a> I set display as inline-block, which FF ignores but IE uses to display height. A line-height I also put in here to bring different browsers closer, although IE still renders the font a fraction differently. Instead of inline display on the <li>s, I floated them left. The IE6 hack was not required, so menu css is ul#minitabs{
list-style: none;
margin: 0;
font-weight: bold;
}
ul#minitabs li{
background: #669966 url(images/tab_bg.png) repeat-x;
margin: 0 2px;
float: left;
}
ul#minitabs a{
text-decoration: none;
padding: 0 10px;
color: #fff;
font-variant: small-caps;
font-family: "Trebuchet MS", Tahoma, Verdna, Sans-Serif;
font-size: 2em;
border-bottom: 1px solid #999;
text-align: center;
display: inline-block;
line-height: 1.2em;
}
ul#minitabs a#current{border-color: #F60;color: #06F}
ul#minitabs a:hover{
border-bottom: solid 3px #FF6600;
}


For the centre icons panel, removing the paragraph width and assigning the paragraph a left margin of 116px to clear the graphics seems to work cross-browser without the IE hack. So #icons css is #icons_holder {
display: block;
width: 100%;
list-style: none;
font-size: 1.3em
}
#icons_holder li {
float : left;
width: 33%;
}
#icons_holder p{
margin-left: 116px;
}


The site then looks the same (bar the slight render difference on the font) between FF1.5, IE6 and IE7.

Cheers
Graeme

[qwik3r]

Graeme, thanks for chiming in, glad to see you broke away from fighting the proverbial dragons lol. (knight in shining armor reference) Anyway few things. 1) did the javascript rounded corners show up quickly for you? If you recall i originally had the mountaintop corners technique but I figured this was easier to change on the fly. Instead of creating 2-4 different corners/graphics i just make a gradient in PS then change the color.

2) I am thinking of changing the icons in the green box, how it looks now it doesn't look centered, it just looks offset and not right, I may just include 2 icons, 1 to the left a block of "welcome" text and one of the far right so its basically centered, what do you think?