CSS Forum

**UUilliam** · 06:05 AM

What more can I say, firefox it works ie it doesnt, fix ie, firefox breaks etc...

please look back to this topic (it links to this one) http://www.webmaster-talk.com/websit...eaver-cs4.html

Basically I have used css to contain my background image (content, nav, banner, ad, bottom ad...)
but the div id i used to contain it, I was using to position my text (cause it wouldn't align correctly to start with so I was using top:*px; left:*px; to align it)

For some reason it always seems to be the banner / header that messes the website up, on EVERY websit I have tried to make thats the part that messes up...

anyways I suppose what i am asking is;

- how would i then align my text

Would I just do like

<Div class="banner></div>
<Div id="banner_text>


</div>

and in css do
.banner { position:relative; z-index:1; width:*px; height:*px; background:#000 url(/image.jpg) no-repeat}
#banner_text {position:relative; z-index:2; width:*px; height:*px; font-family:font; font-size:*px; color:#fff; left:0px; top:0px; }

-how would I make it appear the same in both firefox and ie (or gecko and non-gecko based browsers)

-how would I stop people being able to select the layout, would I need to add all images in as a background image?

**UUilliam** · 08:57 AM

Confirmed, I can do my CSS example to position my text

owever it may be the wrong way?

and I also changed z-index:2; to 1
I uess z-index is only really useful if you want to hide text like keywords to boost your search engine rank then? (i.e. write a huuuuge paragraph and in css name it z-index:1; then everything else will be z-index:2; ?)

I thought z-index was like layers? ah well it works that way however still got the compatibility problem, I tried

but it doesn't read that .css file it just reads the first .css file.

the code I ended up having to use so it wouldn't break (in mozilla)
was

Note: i could also change div id to div class and just change the # to a . in css and it would work the exact same way, why is this?

in html

Code:

<div id="banner"> 
        <div id="banner_text">
        <!--Start banner here-->
        Testing text
        <!--end banner here-->
        </div>

if i added </div> in after <div id="banner"> it would explode the template...
anyone know why? uh and the text would then mis-align.

and in css

Code:

#banner {
    position:relative;
    overflow:visible;
    z-index:1;
    width:682;
    height:126;
    left:0px;
    top:0px;
    background:#363636 url(images/banner.jpg)
}
#banner_text{
    position:relative;
    overflow:visible;
    z-index:1;
    width:300px;
    height:50px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 28pt;
    font-weight:700;
    color: #dc02c0;
    left:230px;
    top:45px;
}

**UUilliam** · 01-15-2010, 08:58 PM

bump?

**LadynRed** · 01-17-2010, 02:46 PM

The first thing you need to do is learn to use the normal document flow instead of trying to use positioning for everything. It's not necessary and you are just ASKING for trouble with IE versions less than 8!

**UUilliam** · 01-17-2010, 03:55 PM

in otherwords take out Position:relative; ?

I dont really get it.

**chrishirst** · 01-17-2010, 05:05 PM

No, not many people do.

In most cases there is no need AT ALL to use position:ANYTHING.

Very few elements in layouts need positioning and newbies (or WYSIYG users) do not understand what positioning actually is, what it means and the ramifications of using positioning.

**UUilliam** · 06:09 PM

:/ Removed the position tag, replaced it with margin:0px 0px 0px 0px; (numbers adjusted where necessary)

but not the red box jumps down under neith the green one... and left:10px; doesn't work meaning the blue box doesn't align with the edge of the template even in ie but is even worse in firefox..
my work around for that was to put in 10px in the margin:*px *px *px 10px; bit. :/

Why are the boxes wider in firefox than they are in ie?

**chrishirst** · 01-17-2010, 06:14 PM

dunno, do we get at URI to look at?

**UUilliam** · 01-17-2010, 06:16 PM

Ill just update this link each time: http://uuilliam.net/lynne/index.html

**chrishirst** · 01-17-2010, 06:19 PM

having no DTD is the first problem.

Without it IE will be in "quirks" mode

**UUilliam** · 06:24 PM

is dtd this thing?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

what would it be for CSS /html?
or is that it?

I suppose it must be, after adding it, IE messed up just like firefox ;P

so I suppose, al lthats left to do now will be resize the boxes accordingly?

**chrishirst** · 01-17-2010, 06:25 PM

It tells browsers how the page should be rendered and what type and what level of coding should be in the document.

**UUilliam** · 01-17-2010, 06:30 PM

I Would give you talkputation, But i need to spread some around

Thanks a lot, It FINALLY works in both haha, taking these comments on board I will try coding my other templates

However IDK if the code is correct, but it works.