box model IE hacks (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

c1sissy -> box model IE hacks (4/9/2004 15:27:56)

Ok, what I am playing with now is driving me nutso!

I can get it to look great in Opera, and horrible in IE, if I get it to look ok in IE in opera it is off.

I'm searching for some box model hack information/tutorials/guidance.

I have the header, looks great both browsers, then the horiz nav looks great in both browsers.

Next div, has a left and right column. They are not lining up correctly!

And my footer appears to have a mind of its own on this page. BUT on the other page, same code and styles it is behaving.?!

Everythign was working great, both browsers until I found a few typos in the css. Fixed that and everythign went its own way. It is not listening to me at all! ARGH!

I don't have a link as I am playing with this on my machine.

Here is my css. This is an embedded style.
body {
font-size: small;
font-family: arial, Verdana, Sans-Serif;
}
#header {
width: 98%;
height: 60px;
background-color: #ffffff;
margin-left: 5px;
border: 1px solid #000000;
}
.directory {
font-size: x-large;
font-weight: bolder;
font-family: Verdana, Sans-Serif;
}
.small {
font-size: x-small;
font-family: Verdana, Sans-Serif;
color: #000000;
}
.target {
font-size: small;
font-weight: bolder;
font-family: Verdana, Sans-Serif;
color: #000080;
}
#nav ul {
background-color: #FFFF99;/*color is bright yellow*/
width: 98%;
height: 25px;
padding-top: 2px;
padding-left: 4px;
margin-left: 5px;
font-size: 10pt;
font-weight: bold;
font-family: arial, Verdana, Serif;
border-bottom: 4px solid #D3D3D3; /*color is light grey*/
}
#nav ul li {
display: inline;/*navigation*/
}
#nav ul li a {
list-style-type: none;
padding-right: 25px;
padding-left: 20px;
}
div .leftcontent {
border-top: 1px solid #000000;/*left column of page*/
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
width: 55%;
position: absolute;
padding: 0px;
margin-top: -20px;
margin-left: -30px;
margin-right: 10px;
font-family: arial, Verdanan, Serif;
font-size: small;
}
div p .bold {
font-weight: bold;
}
div p .color{
font-weight: bold;
color: #990033;}
div .leftcontent a {
font-weight: bold;}

div .rightcontent {
border-right: 4px solid #D3D3D3;/*right column of page*/
border-bottom: 4px solid #D3D3D3;
border-left: 4px solid #D3D3D3;
background-color: #FFFF99;
width: 40%;
float: right;
position: relative;
margin-top: -20px;
margin-left: 35px;
margin-right: 3px;
padding: 0px;
font-family: arial, Verdanan, Serif;
font-size: small;
}

div .rightcontent a {
font-weight: bold;
}
div div .leftcontent {
border: 1px solid #000000;
width:10%;
float: left;
position: relative;
width: 49%;
margin-top: 0px;
margin-left: -0px;
margin-bottom: 0px;
margin-right: 0px;
padding: -0px;
font-family: arial, Verdanan, Serif;
font-size: small;
}
div div li .rightcontent{
border: 1px solid #000000;
width:49%;
float: right;
position: relative;
margin-top: 0px;
margin-left: -0px;
margin-bottom: 0px;
margin-right: -0px;
padding: -0px;
font-family: Arial, Verdanan, Serif;
font-size: small;
}
div div ul li .leftcontent{
margin-left: -10px;
padding: -3px;
}
div div .footer {
clear: both;
width: 98%;
height: 16px;
padding-top: 25px;
position: relative;
text-align: center;
font-size: small;
font-family:Arial, Verdana, Sans-Serif;
border: 1px solid #000000;
}

I found a few things on box model hacks but don't really understand them yet.[&o]

<edit>found THIS and am wondering how something like this would work</edit>



jaybee -> RE: box model IE hacks (4/9/2004 15:53:49)

Don't ask me, it's taken me 3 days to stop my menu advancing up the page every time you shrank the window. [&:]

I'm all css'd out for at least a week..... which is a shame as I have 3 more sites to do. I feel some tables coming on!!!!



c1sissy -> RE: box model IE hacks (4/9/2004 16:43:56)

I didn't have a problem with the menu, once I understood inheritance etc.. the horizontal menu was a breeze to get. NOW I need to figure out how to get this to work cross browser. IT seems like the link in the edit of my first post might be the answer. I'm going to try it out later on tonight and see how it works out. I'll update and let you know[;)]

I'm still totally addicted to css, and working on this page is making me even more totally addicted! I totally LOVE CSS! [8D][:)][;)]



Giomanach -> RE: box model IE hacks (4/9/2004 17:29:44)

Take a look at my CSS stylesheet for Glimangia (here)

It has vertical and horizontal nav, looks a little different in Firefox, NN and Opera to IE, but they layout is generally the same (fluid design)

Dan



jaybee -> RE: box model IE hacks (4/10/2004 6:34:59)

Turned out my menu problem was the same one Dan was getting. I had the pic at the top set as a background rather than inserted. The menu just trundled its way up over the top.

It's quite an interesting effect and one of these days I may even find a use for it. [:D]



c1sissy -> RE: box model IE hacks (4/10/2004 10:01:13)

My link in the edit above for creating a stylesheet for Ie and one for other browsers actually worked!

Now it is a matter of tweaking each one to get things to layout where I want them.

I'm still not locating the problem with the footer and mos tlikely this weekend will not get in any more work on it.

Happy Easter everyone!



Giomanach -> RE: box model IE hacks (4/10/2004 10:24:47)

Jaybee

That only ever happens when you have:

background: #00000 url(images/image.jpg) fixed;

or

background-position: fixed;

It fixes the background in position so it doesn't move, and everything else will walk all over it.

Mom

Have you tried using a fluid absolute design (if that makes an sense)?

Dan



c1sissy -> RE: box model IE hacks (4/11/2004 9:01:27)

Hi Dan,
I like the layout that I have right now, it is just a matter of tweaking and getting things to behave. And learning how to get things to work. This is the reason that I am so thankful to have a real website to play with. And very grateful to have a friend that was willing to let me play around with his hard work[;)].



jaybee -> RE: box model IE hacks (4/11/2004 14:13:13)

quote:

ORIGINAL: c1sissy

I didn't have a problem with the menu, once I understood inheritance etc.. the horizontal menu was a breeze to get.


This was a vertical menu so it looked really weird sat in the middle of the logo.



c1sissy -> RE: box model IE hacks (4/11/2004 15:03:28)

LOL I understand what you mean. I have a footer that appears to think that it belongs on top of my content div[:@]

However, I will eventually let the footer know that I am the boss, and it will behave.



Donkey -> RE: box model IE hacks (4/22/2004 20:05:25)

I have recently been playing around with a fluid design using CSS positioning as part of the long term re-design of my company web site, so far I have only produced two pages as templates and I want to get them working properly before I take it further.

I want to have the pages appear as near to the same in each browser as possible and after following the link from C1sissy above I have found that the incremental overides method shown further down the linked page works best for me
quote:

div {...} /*style for all*/
* html div {...} /*style for IE*/
I can position the divs differently for IE and still only have one style sheet. (I would be interested in an explanation as to how that works BTW). The CSS won't validate as it throws up all the overrides as errors but it will validate if you take them out so I would argue that the basic css is valid and the non-valid overides are permissable to make it work with a non-compliant browser.

However I'm still finding that Opera and Firefox position div boxes differently from each other. This is mainly a problem in vertical positioning. If I adjust the 'top' values I can either have one of the two looking exactly like IE or both looking slightly different. So is there a way of adjusting Opera and the Firefox/Mozilla/Netscape browsers separately? If not which is the best solution - a compromise between the two or should I favour one over the other? I would appreciate some feed back on this before I develope the site any further.

Thanks in anticipation.
Peter

<edit> Another question.
I can't make the incremental overides work when I use an ID selector instead of a class, is there a way of doing this?</edit>



d a v e -> RE: box model IE hacks (4/23/2004 3:55:26)

i think i'm right in saying that IE correctly interprets the box model when it's in strict/standards mode (not quirks mode) i.e. when you use the full, strict html doctype or the xhtml one.



Donkey -> RE: box model IE hacks (4/23/2004 10:10:49)

quote:

i think i'm right in saying that IE correctly interprets the box model when it's in strict/standards mode (not quirks mode) i.e. when you use the full, strict html doctype or the xhtml one.


As you have probably gathered, I'm no expert but I don't think that statement is correct. I'm using the strict DTD, it validates OK (both the html and the CSS) but without the overides I find that IE, Firefox and Opera interpret the position differently - i.e. 3 sightly different layouts. (I'm using the latest verson of each browser.)

From lurking around this forum (and a few others) I gather that the percieved wisdom is that Firefox and Opera are both compliant with the standards and IE is not. So why are Firefox and Opera behaving differently? Surely compliance should mean that they both interpret positioning divs in the same way?

Is it possible to have 3 stylesheets one for each browser? If so how would you write the links/import statements?


Peter



d a v e -> RE: box model IE hacks (4/23/2004 13:44:01)

i\m just talking about the box model
http://www.quirksmode.org/index.html?/css/box.html
doubtless it\s kack as well for positioning



jaybee -> RE: box model IE hacks (4/23/2004 14:38:39)

quote:

Is it possible to have 3 stylesheets one for each browser? If so how would you write the links/import statements?


If you're nice to Mrs Moderator Maam, she'll tell you. She's done it. But it'll probably involve lots of freshly baked banana cake.



c1sissy -> RE: box model IE hacks (4/23/2004 17:51:51)

quote:

If you're nice to Mrs Moderator Maam, she'll tell you. She's done it. But it'll probably involve lots of freshly baked banana cake.

[:D]
MMMM banana cake, lots of it. [;)]

Yes it is possible to have several style sheets for the different browsers.

As per the link that I posted previously in this thread, it shows you that you can do this with IE5 etc.... Also remember that there are some people who do this so that NN4 is included in with their style sheets. It has to do with the cascade effect. Older browser styles get loaded last as the newer browser style sheets would not be recognized and the older browser would not recognize it.

Of course I'm open for any corrections here as it has been a tad since I have read all of this information.[;)]



Nancy -> RE: box model IE hacks (4/23/2004 18:06:08)

Here's an article on using multiple stylesheets, and some situations where that would be helpful.

http://www.basictips.com/tips/article_88.shtml

Nancy



Donkey -> RE: box model IE hacks (4/24/2004 5:20:10)

Thank you C1sissy and Nancy for the info. I understand how to have two stylesheets one for IE and one for the rest, that works OK, but I'm finding that Firefox and Opera don't always interpret the positioning in the same way. So what I really need is a way to have 3 stylesheets one for IE one for Opera and another for Firefox, Mozilla and Netscape.

Is this possible? If not how do other people overcome the problem?



Giomanach -> RE: box model IE hacks (4/24/2004 5:29:52)

I only ever use one stylesheet for all of the big four, but I am very careful on my positioning. I always allow for the "few extra" pixles that will go astray in some browsers. It's mainly because I tend to use absolute positioing rather than relative or fixed.

Sometimes for it to work in all browsers, what you will need to do is set some of the attributes etc with the html tag in the stylesheet:

html{
-----CSS coding---
}

Dan



c1sissy -> RE: box model IE hacks (4/24/2004 5:32:38)

Hi Peter, I wish I could help you out on this one, but I dont know the answer[&o]

I think that hacks are used somehow, but I'm not sure how to use these yet.

Maybe Mahircaish will pop in sometime soon and be able to help you out on this one.



d a v e -> RE: box model IE hacks (4/24/2004 17:52:18)

http://www.ericmeyeroncss.com/bonus/render-mode.html might be useful as well...



c1sissy -> RE: box model IE hacks (4/24/2004 19:00:43)

Dave, I'm not sure that this is what peter is looking for. This one looks to be on style sheet switching.

What peter is looking for is a way to get Opera and Foxfire's pages to look correct with the rest of the styles in the other browsers. I think, if I understand correctly, he is wondering if there is a way to create a style sheet for Opera and Foxfire such as the link above suggests doing for IE.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375