|
| |
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
 |
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.
<edit>found THIS and am wondering how something like this would work</edit>
< Message edited by c1sissy -- 4/9/2004 15:32:57 >
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
|
|
|
|
Giomanach
Posts: 6090
Joined: 11/19/2003
From: England
Status: offline
|
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
< Message edited by Giomanach -- 4/9/2004 22:30:12 >
_____________________________
| |
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
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!
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
Giomanach
Posts: 6090
Joined: 11/19/2003
From: England
Status: offline
|
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
_____________________________
| |
|
|
|
d a v e
Posts: 4067
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
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.
_____________________________
David Prescott
Gekko web design
| |
|
|
|
Nancy
Posts: 3626
Joined: 11/9/1999
From: Nebraska
Status: offline
|
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
_____________________________
Easy Estimates -- is a simple to use tool to quickly build a Web site page enabling visitors to quickly and easily create an estimate of the cost of services that you provide.
| |
|
|
|
Giomanach
Posts: 6090
Joined: 11/19/2003
From: England
Status: offline
|
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
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
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.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
