Browsers

chubbs · #1 Jun 2nd, 2007, 15:22

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 · #2 Jun 2nd, 2007, 15:35

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

It looks fine in IE 6 for me, however

chubbs · #3 Jun 2nd, 2007, 16:04

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

Lchad · #4 Jun 2nd, 2007, 16:19

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 · #5 Jun 4th, 2007, 19:48

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

chubbs · #6 Jun 7th, 2007, 18:18

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

moojoo · #7 Jun 12th, 2007, 15:15

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 · #8 Jun 12th, 2007, 18:17

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 · #9 Jun 12th, 2007, 18:36

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 · #10 Jun 12th, 2007, 18:38

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 · #11 Jun 12th, 2007, 18:59

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

karinne · #12 Jun 12th, 2007, 19:06

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 · #13 Jun 12th, 2007, 19:12

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

karinne · #14 Jun 12th, 2007, 19:14

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

float

Quote:

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 · #15 Jun 12th, 2007, 19:27

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 · #16 Jun 13th, 2007, 12:32

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 · #17 Jun 14th, 2007, 13:50

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 · #18 Jun 14th, 2007, 13:55

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 · #19 Jun 14th, 2007, 14:22

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 · #20 Jun 14th, 2007, 15:32

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

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Browsers