Browsers

[chubbs]

Hi!

Can you guys tell me why my page looks different in IE and in Firefox?

Here is the Url :http://vinotrade.co.uk/bjd/index.html

Thank you!

[Pádraig]

It looks the same in Firefox and IE 7. Theres a screen shot below.

It looks fine in IE 6 for me, however

[chubbs]

Yes, thats the problem. It looks ok in IE6 but it doesnt look the same in 7 and in Firefox. Why?

[Lchad]

Change your absolute positioning of the content class to something like this.

Code: Select all

.content{
    position:relative;
    left:250px;
    top:-200px;
    width:500px;
    min-height:400px;
    line-height:1.4;
    font-family:Arial, Helvetica, sans-serif;
    color:#666666;
    font-size:14px;    
    
}

I'm not great with relative positioning, and I think that .content class is really tall but that might get you over the hump.

[chubbs]

How can i make the background expand as the content grow? and how the menu background will follow it?

[chubbs]

How am i gonna make the navbar follow the rest of it?

[moojoo]

Looks like you just need a clearing div right before you close your containing div.

Code: Select all

.clearing {
height:0;
margin:0 0 -1px 0;
clear:both;
overflow:hidden;
}

then in your html

Code: Select all

<div class="clearing">&nbsp;</div>

That should keep the background below all the floated elements.

the css declaration will handle all browsers in particular IE trying to give the clearing div some height. Enjoy!

As for the background; you want to place the background on your containing div and have it repeat on the y axis.

Code: Select all

#container {
width: 600px;
margin:0 auto;
text-align:left;
background: #FFF url(../images/foo.jpg) left top repeat-y;
}

[chubbs]

Thank you Mojoo. I tried it but it doesnt work. it is still the same.

I did try to do some other stuff, this is what i got so far http://vinotrade.co.uk/bjd/bjdtest.html

It is working ok in IE7 and Firefox, but NOT in IE6(grrrrrrrr)

[chubbs]

i got it working, thank you! How can i do that , when i insert bigger content, than the whole navbar and the container will expand?

[karinne]

Put your shaded background (background3.png) as a background to html

Code: Select all

html {
    background: #fff url(http://vinotrade.co.uk/bjd/images/background3.png) repeat-x 0 0;
    font: 14px Tahoma, Geneva, sans-serif;
    color:    #000;
}

And use the Faux Column technique and apply your content background to body

Code: Select all

body {
    background: url(../i/body-bg.jpg) repeat-y center top;
    margin: 0 auto;
    width: 755px;
}

[chubbs]

Thank You Karinne!, Should i still need to use the code from mojoo?

[karinne]

Well ... you're not using floats, which you should ... they are much more easier to deal with then absolute position IMO. Then just apply overflow: hidden to .main

[chubbs]

what floats are..... sorry but i am still learning

[karinne]

see http://www.newguyinennis.com/samples...t_left_column/

float

This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned.

[chubbs]

Oh yes i have read about this, Thank you!
Thank you guys for the big help from all af you!
Can you please just check the final result? http://www.vinotrade.co.uk/bjd/index.html

[kitcorsa]

also make sure you set text sizing for everything etc as pcs and macs display text different and you may find your site jumping in a mac etc.

also image padding is different on macs and on sefari.

if you google resetting brouser default css you will find loads of information and code just to copy and paste into your css

[fuzzee]

Hi! for me, the final result looks GHASTLY in Firefox 2.0 and IE 7!

Here's a screenshot (I highlighted the text so you could see it):



That text is nasty!

you need to work on the 2 columns!

[fuzzee]

It's a bad idea to set the text in an absolute position. you probably have a bigger screen than me: make your browser window smaller, and you'll see what I mean!!! I did mess with your code a bit, and see your problem. I wouldn't have coded it the way you did, but everyone's different!

[moojoo]

In your case you certainly don't need any type of "positioning" on your content, what you need is a standard two column layout which if structured correctly will hold your content where it needs to be without using relative or absolute positioning.

1. Restructure your layout, in this case I would suggest starting from scratch.

2. Apply your background to your containing div and repeat it on the y axis.

If you need any more help getting it done just let us know.

[chubbs]

Thank you guys! I will try to fix those thing, but my time is realy short. I will try it def!