Sat, 2003-04-12 10:33
I'm working on this website with a group of students, but we are having problems with cross browser. Could someone give me a few pointers?
1) Somehow the boxes don't render correctly: first off the right float seems to overlap with the main DIV, which should be liquid instead. This problem is especially noticeable in Netscape with 800X600.
2) Another problem is how might I make the main DIV take up an optimized space? What i want is to set the side DIVs in pixels, and the main, middle DIV take up all the rest of the space, whether it is in 800 or 1060 px.
3) Although what I describe in (2) is what I ultimately want, I tried to work around it, but also had difficulty. I wasn't able to eventually set up a DIV to take up all of this space and completely center another fixed-size div inside without having the content of the div centered also.
I'd appreciate any other comments or feedback you might have!
Thanks!
VEvola
Sat, 2003-04-12 11:26
#1
tableless layout: crossbrowser help!
Hi, Vevola,
As a starting point, you might like to check out the layouts at www.bluerobot.com, which could very well suit what you're trying to do. Let us all know how you go with it!
Sat, 2003-04-12 13:11
#2
tableless layout: crossbrowser help!
Sven wrote:
As a starting point, you might like to check out the layouts at www.bluerobot.com....Let us all know how you go with it!
Yes, in fact this is one of the pages that helped us understand CSS-P (alistapart is another favourite of ours!)
Notwithstanding this, I don't understand what's wrong with our styles.
Any clues?
Grazie!
VEvola
Sat, 2003-04-12 19:47
#3
float
Hi vevola,
Here's something for you to try.
Remove the position absolutes from contenuto and menusec, allow them to float.
Here's an example, it's not exactly what you want but it may give you another option.
#contenuto {
overflow: auto;
margin-left: 5%;
margin-top: 70px;
height: 68%;
width: 75%;
z-index: 3;
float:left;
border: 1px dotted #6699cc;
}
#menuSec {
right: 0px;
float: right;
margin-top: 64px;
margin-right: 5px;
width: 92px;
}
You will have to play around with the position values and test it well.
Sat, 2003-04-19 04:10
#4
Re: tableless layout: crossbrowser help!
vevola wrote:
1) Somehow the boxes don't render correctly: first off the right float seems to overlap with the main DIV, which should be liquid instead. This problem is especially noticeable in Netscape with 800X600.
This might have something to do with the infamous box-model issue. When you specify width or height for a DIV, and it has border and/or padding, some browsers add the border/padding to the size, and some browsers don't. So when you specify sizes you need to be careful about this. Sometimes a good workaround is to not specify padding/border and create the padding another way.
Quote:
2) Another problem is how might I make the main DIV take up an optimized space? What i want is to set the side DIVs in pixels, and the main, middle DIV take up all the rest of the space, whether it is in 800 or 1060 px.
The DIV will by default fill up whatever space is available. You don't need to specify a width for it. And because of the box-model thing mentioned above, it's often better not to specify a width.
Quote:
3) Although what I describe in (2) is what I ultimately want, I tried to work around it, but also had difficulty. I wasn't able to eventually set up a DIV to take up all of this space and completely center another fixed-size div inside without having the content of the div centered also.
That's probably because you used text-align:center; on the outer DIV to center the inner DIV. Or maybe you used align="center". In either case, IE inherits the alignment to the contents of the inner DIV. This is "incorrect" and the way to fix it is to reset the alignment for the inner contents to however they should be.
div#outer {text-align:center;}
div#inner {
margin-left: auto;
margin-right: auto;
text-align: left;
}
---------------
<div id="outer">
<div id="inner">
</div>
</div>
Sun, 2003-04-20 01:28
#5
tableless layout: crossbrowser help!
Very comprehensive, Deanimal! 