CSS positioing help!

[QueBert]

Created what I wanted for the layout in Photoshop, sliced it up in Imageready. created tables using the slices, everything is good. So I created some CSS div's formy content area and my buttons. this is the sample code

<style type="text/css">
div.content
{
position: REALTIVE; TOP: -450px; LEFT: 22px;
WIDTH: 680px;
TEXT-ALIGN: justify;
OVERFLOW: auto;
PADDING-RIGHT: 34px;
PADDING-LEFT: 0px;
FONT-WEIGHT: lighter;
FONT-SIZE: medium;
PADDING-BOTTOM: 2px;
MARGIN: 16px 2%;
COLOR: #000000;
PADDING-TOP: 5px;
FONT-FAMILY: 'Courier New', Courier, 'Times New Roman';
HEIGHT: 310px;
TEXT-DECORATION: none

}

div.back
{
position: relative; top: -429px; left: -182px;
}

div.forward
{
position: relative; top: -461px; left: 172px;
</style>


here's my problem, the div.content looks slightly different in IE & Firefox. the div.back & .forward also do. It's enough to make it look like crap in Firefox, and if I fix the CSS so everything lines up in Firefox, it looks off in IE. I read up on CSS but I don't know why I can't get it to look the same in both browsers. There has to be some sort of way to correct the way IE screwed up the CSS elements?

 

[LanceM]

Without really looking into the code, I must ask if you have a proper doctype declaration.

Also, what is the problem? Is it simply shifted one way or another? There are some little hacks for that.

 

[QueBert]

Originally posted by: LanceM
Without really looking into the code, I must ask if you have a proper doctype declaration.

Also, what is the problem? Is it simply shifted one way or another? There are some little hacks for that.

I tried 2 different doctypes. It's off a 10 or so pixels on the right and the bottom, it really messes up the layout I came up with. This is a problem with CSS, everything I've read on google says IE doesn't render css correctly. I found JS that's supposed to detect the browser and allow you to set up various div's for different broswers to fix problems like this. I can't get it to work though. The damn script is simple enough, just not for me haha.

I'm not giving up I'm sure there's an easy enough fix. I mean if it comes down to it I'll make the site 2 times and have a IE/Firefox choice when they first come so it can direct them to the right one.

 

[igowerf]

From what I can tell, it's because you're defining a width/height and margin/padding all in one element. Look up "IE box model" on Google. The quickest solution is to use nested div tags and separate the padding/margins and width/height into two divs. The outer one defines the width/height, the inner one defines the margin/padding.

 

[QueBert]

Originally posted by: igowerf
From what I can tell, it's because you're defining a width/height and margin/padding all in one element. Look up "IE box model" on Google. The quickest solution is to use nested div tags and separate the padding/margins and width/height into two divs. The outer one defines the width/height, the inner one defines the margin/padding.

interesting, this looks like what I needed to know thank you. Now I just have to work on my CSS skills so I can incorperate this into my site. didn't know about nested tags, but now I do

 

[cubby1223]

Also be aware that IE pretty much ignores the overflow property. I'd have to run up some samples to verify exactly how it works - IIRC, if overflow is set to anything besides scroll, if the element inside extends beyond the specified height or width, IE automagically alters the height & width values to compensate, instead of following the directions of the overflow tag.

 

[cubby1223]

Why do you have:

MARGIN: 16px 2%;

?

I'm pretty sure that's not proper css, and is probably causing undesired results?

 

[Rip the Jacker]

Originally posted by: cubby1223
Why do you have:

MARGIN: 16px 2%;

?

I'm pretty sure that's not proper css, and is probably causing undesired results?

That's the same thing as

margin:16px 2% 16px 2%;
top right left bottom

 

[cubby1223]

Originally posted by: Rip the Jacker

Originally posted by: cubby1223
Why do you have:

MARGIN: 16px 2%;

?

I'm pretty sure that's not proper css, and is probably causing undesired results?

That's the same thing as

margin:16px 2% 16px 2%;
top right left bottom

Alright, appears to check out. Though I still don't like seeing percentages, who knows if different browsers always round the same way in all possible situtations. And especially when the parent element's width is given in exact pixel dimensions, then a percentage certainly isn't needed.

 

[igowerf]

Originally posted by: cubby1223
Also be aware that IE pretty much ignores the overflow property. I'd have to run up some samples to verify exactly how it works - IIRC, if overflow is set to anything besides scroll, if the element inside extends beyond the specified height or width, IE automagically alters the height & width values to compensate, instead of following the directions of the overflow tag.

To get overflow auto to work nicely with IE and floated, nested elements, you'll have to do a little CSS trick. IE needs a height set in order for overflow:auto to work:

* html div.content {
height: 1%;
}

I've also seen people use:

html div.content {
_height: 1%;
}

 

[QueBert]

Originally posted by: cubby1223
Why do you have:

MARGIN: 16px 2%;

?

I'm pretty sure that's not proper css, and is probably causing undesired results?

man I'm learning CSS, I haven't found one good site to learn it from, so I'm Googling and reading up a lot of what I can find. Problem is people seem to speak more on their opinions on what they like, rather then what's the proper way. I can honestly say my CSS code is probably ugly, but the bit I knew, with some tweaking on it lead to the effect I wanted. Well aside from the IE/Firefox output thing, which is just a pain in the ass.

and to igowerf, if overflow is causing a problem I could just use a height/width since I know the exact pixels I want my content to cover. I haven't tried that yet but if it'll help the offsetting I'm all for it!

 

[cubby1223]

Originally posted by: QueBert

Originally posted by: cubby1223
Why do you have:

MARGIN: 16px 2%;

?

I'm pretty sure that's not proper css, and is probably causing undesired results?

man I'm learning CSS, I haven't found one good site to learn it from, so I'm Googling and reading up a lot of what I can find. Problem is people seem to speak more on their opinions on what they like, rather then what's the proper way. I can honestly say my CSS code is probably ugly, but the bit I knew, with some tweaking on it lead to the effect I wanted. Well aside from the IE/Firefox output thing, which is just a pain in the ass.

and to igowerf, if overflow is causing a problem I could just use a height/width since I know the exact pixels I want my content to cover. I haven't tried that yet but if it'll help the offsetting I'm all for it!

Why don't you post your page somewhere, so we can see what you're trying to build, to better help.

 

[FeuerFrei]

This is why I curse FF regularly for its brain dead implementation of CSS. You want to stack divs vertically with variable padding or borders and have them equal size? Sorry FF users, your damn browser adds padding&border to the specified width. I've been running Javascript after the page loads to resize junk for FF users.
FF just likes to do things non-intuitively.

If you have to resort to 2 nested divs with the inner one holding content, then you may as well throw out the padding property from the CSS specification.

 

[Panthro]

Originally posted by: QueBert

Originally posted by: cubby1223
Why do you have:

MARGIN: 16px 2%;

?

I'm pretty sure that's not proper css, and is probably causing undesired results?

man I'm learning CSS, I haven't found one good site to learn it from, so I'm Googling and reading up a lot of what I can find. Problem is people seem to speak more on their opinions on what they like, rather then what's the proper way. I can honestly say my CSS code is probably ugly, but the bit I knew, with some tweaking on it lead to the effect I wanted. Well aside from the IE/Firefox output thing, which is just a pain in the ass.

and to igowerf, if overflow is causing a problem I could just use a height/width since I know the exact pixels I want my content to cover. I haven't tried that yet but if it'll help the offsetting I'm all for it!

QueBert,

Try this site...
Web Developers Handbook

This site helped me learn css. Very good site!

 

[QueBert]

Originally posted by: FeuerFrei
This is why I curse FF regularly for its brain dead implementation of CSS. You want to stack divs vertically with variable padding or borders and have them equal size? Sorry FF users, your damn browser adds padding&border to the specified width. I've been running Javascript after the page loads to resize junk for FF users.
FF just likes to do things non-intuitively.

If you have to resort to 2 nested divs with the inner one holding content, then you may as well throw out the padding property from the CSS specification.

Unless when I've been reading is a bunch of fanboi sh!t from Firefoxers. IE is the one that doesn't handle CSS properly. I don't know, and honestly I don't care because I know what I did looks different in both browsers.

linky

if you check that out in IE and FF you can see what I'm talkin about, I got the bottom part to line up in both browsers, not sure exactly how though the scrollbar on the right is still off.

what I'm shooting for is to have the scrollbar close to the outside of the content area, in the same spot in both IE & FF. Also trying to get the text to extend a bit more left/right without moving the Scroll Bar much.

anyone who wants to take a quick look and tell me what the hell I'm doing wrong I'd great appericate it.

 

[cubby1223]

Originally posted by: FeuerFrei
This is why I curse FF regularly for its brain dead implementation of CSS. You want to stack divs vertically with variable padding or borders and have them equal size? Sorry FF users, your damn browser adds padding&border to the specified width. I've been running Javascript after the page loads to resize junk for FF users.
FF just likes to do things non-intuitively.

If you have to resort to 2 nested divs with the inner one holding content, then you may as well throw out the padding property from the CSS specification.

By far, Mozilla / FireFox better follows the standards set by W3C, compared to IE.

What IE also usually does is it takes bad, incorrect code and interpret what you really were trying to do. That's why IE "seems" to be more intuitive. But really, if you want to make a well written page in all browsers, you start by following the W3C standards to the exact letter, then make small adjustments for browser issues.

 

[cubby1223]

Now that I see the actual design, you're just going to kill yourself trying to work with relatively positioned elements like that.

Split the layout_04.jpg image into two parts, the upper part that goes behind the content, and the lower part which goes behind the navigation buttons.

On the upper part, make the image the background of your element, then put your content directly in there, instead of screwing around with relative placements.

On the lower part, combine the layout with the buttons, and use an image map to create the links.

 

[QueBert]

Originally posted by: cubby1223
Now that I see the actual design, you're just going to kill yourself trying to work with relatively positioned elements like that.

Split the layout_04.jpg image into two parts, the upper part that goes behind the content, and the lower part which goes behind the navigation buttons.

On the upper part, make the image the background of your element, then put your content directly in there, instead of screwing around with relative placements.

On the lower part, combine the layout with the buttons, and use an image map to create the links.

hummm, I understand what you're saying. But how do I make the scroll bar show up in the same spot on both browsers? Right now that is my #1 problem. I could slice my background images up any way I want and it's still going to show the div.content differently. The bottons towards the bottom are probably going to be removed anywho, I made a css nav bar that'll be at the top. Since the entire layout fits on a screen without scrolling even @ 800x600 I don't think i'll need buttons at the bottom.

I'm concerned how to get my content area to match up, I can make it look right in either on their own, but not together ;(

If there's some other method to get my text in the middle like it is now without CSS which will accomplish what I want I'm interested in knowing. I looked into iframes and was told CSS was the best way to go for this...

 

[cubby1223]

look here

 

[cubby1223]

Also, put this in your css whenever you are creating center aligned web pages:

HTML {overflow: -moz-scrollbars-vertical;}

 

[QueBert]

Originally posted by: cubby1223
look here

CHRIST you're good! I wasn't questioning what you recommended I do to fix it, I just didn't understand how it would work. I definitely have a lot of work to do in my CSS education. You hit the nail on the head man, props to you for doing in probably 2 minutes what I couldn't do in 2 whole days. Back to learning

 

[cubby1223]

Originally posted by: QueBert

Originally posted by: cubby1223
look here

CHRIST you're good! I wasn't questioning what you recommended I do to fix it, I just didn't understand how it would work. I definitely have a lot of work to do in my CSS education. You hit the nail on the head man, props to you for doing in probably 2 minutes what I couldn't do in 2 whole days. Back to learning

Just keep in mind that CSS is not this wonder thing that can make everything better at the snap of a finger. There are times where CSS does a wonderful job. But there are also many times where the tried & true html tables are the better option. You have to learn all the tools that are at your disposal in html & css, to be able to then devise alternate solutions when things just don't work right.

 

[QueBert]

I understand, I used tables for the images and CSS was the only decent way I could figure out how to get the text to scroll in the middle of the page. I hate frames, and iframes just seem to be frames with a few things added. I'm going to keep on studying up on CSS can do some really interesting stuff.

thanks again for fixing my f*ck-up. I did some touch up to my html/css using what you did and everything's looking wonderful.

 

[LanceM]

I'd suggest the book "Stylin' with CSS" for beginners. It even goes over a few of the dirty hacks needed for IE/Firefox compatibility.