CSS problem ( IE and Firefox )

SD1990

Currently making a site for a friend. Site looks perfect on my own laptop when using IE but has a few glitches on other laptops in IE. Bigger glitches then on firefox in general. By glitches i mean positioning of divs.

In the css i use width in percentage not PX because PX wasnt doing what i wanted. Also the doctype is XHTML Transitional.

Also when i Restore down the pages the divs changes ( move)

Any help will be greatly appriciated. Thanks.

p

In all seriousness. How do you expect us to know your problem from that description alone?

It's a bit like saying "I have a problem with this girl I like, she has brown hair. Can you give me some advice?"

Dades

SD1990, it's possible the people trying the site are using different versions of IE. For example CSS will look different in IE 6 to IE 7/8. You need to find this out, as well as give more information.

A link to the site would be ideal.

p wrote: »

It's a bit like saying "I have a problem with this girl I like, she has brown hair. Can you give me some advice?"

She could probably lose a few pounds.

future_plans

You shouldn't use IE to test your site. Use Firefox. Like everything else they do, MS go by their own rules when designing browsers. so use something like FF that abides with the industry standards.

Mr E

IE is more forgiving than FireFox.

Test with firefox while developing the site, then try to get it working in IE (not the other way round).

mewso

Test with both while developing or buy a large pack of paracetamol.

randombar

p wrote: »

It's a bit like saying "I have a problem with this girl I like, she has brown hair. Can you give me some advice?"

you could secretly dye her hair at night, obviously over time so she doesn't notice, 6 months time she'll be blonde!!!!

kevteljeur

GaryCocs wrote: »

you could secretly dye her hair at night, obviously over time so she doesn't notice, 6 months time she'll be blonde!!!!

Oddly enough, the thinking behind this is not dissimilar to the mindset needed for fixing CSS problems in IE. The solution to any given issue is as often as not entirely unrelated to the symptom.

To the OP: post a screenshot of the page in Firefox, a screenshot in your IE and a screenshot from the problem PC. That'll help a lot.



Edit: It'll be the IE box-model (Yours is the semi-compliant IE7 model, and the other systems are using the IE6 box model) and haslayout in any event, which can take a day or two to debug. Good luck.

SD1990

Thanks for all the response.
i have resolved most of the primary issues regarding firefox etc

Still have one small but very irratating problem.

At the top i have a "header" div.

Within this Div there is only 2 images.
The company logo and a Relative Picture.
The problem is the positioning of this div.
I want to position it using Absolute to align it with the rest of the page but it wont work. A simple way of aligning is using center tags but that causes problems on different screen resolutions etc.

Anyone know how to position this div with the images in it using absolute positionming if possible ?

Thanks

Mr E

For the ID/Class on your header section, try using:

margin-left:auto;margin-right:auto;

SD1990

tried it with no success

It seems that the images arent reacting to the changes made in the css and only react to changes made on the actual page

mewso

You need to use margin: 0 auto; (or the above) on the containing div to align stuff to the centre. I would normally have a main div with an id of container or site-content or something which wraps everything on the page. This allows me to centre the header, middle and footer.

SD1990

i dont think center is the word i should of used..

I have all the other divs on the page aligned using Absolute positioning and what i want to do is align this Header div the same way but it wont work..

mewso

Well if you look at some of the earlier posts you might see that more info. is needed before people can really help you. A link to the page or the html and css posted.

SD1990

Ok heres the css. It is the header with the images i am having trouble with.

<style type="text/css">

 #header{ 
  position:absolute;
  width:900px;
  left:180px;
  }
 #headerline{
  position:absolute;
   width:900px;
  color:#000000;
  font-size: 20px;
  background-color:#ff6600;
  left:180px;
  top:300px;
  }

 #headertime{ 
  position:absolute;
  text-align: right;
  width:900px;
  left:180px;
  top:1005px;
  color:#000000;
  background-color:#ff6600;
  
  }
 #footerlink{ 
  position:absolute;
  width:900px;
  color:#FFFFFF;
  background-color:#000000;
  left:180px;
  top:980px;
  }

 #content{
  position:absolute;
  color:#000000;
  background-color:#FFFFFF;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size : 16px;
  height: 659px;
  width:380px;
  left: 400px;
  top:345px;
  }
 #links{
  position: absolute;
  color:#FFFFFF;
  background-color:#000000; 
  left:180px;
  top:345px;
  width:220px;
  height:630px;
  padding: 0.25cm 0cm 0cm;
  }
 #rightsect{ 
  position: absolute; 
  left:760px;
  top:345px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size : 16px;
  color:#000000;
  background-color:#FFFFFF;
  height:659px;
  width:320px;
 
  }
 
 #footer{ 
  position:absolute;
  top:1024px;
  left:180px;
  width:900px;
  color:#FF6600;
  background-color:#000000;
  }

   a{ 
     display: block;
     border: #FF6600 solid thin;
     font-size: 17px;
     color: #FFFFFF;
     background-color : #000000;
     width: 215px;
     text-decoration: none;
     text-align: center;
    }
   a:hover { display: block;
     
     font-size: 16px;
     color: #000000;
     background-color : #ff6600;
     width: 200px;
     text-decoration: none;
     text-align: center;
    }

   #footerlink a{ 
     font-size: 12px;
     color: #ffffff;
     background-color : #000000;
     width:120px;
     text-decoration: none;
 

   h2{ color:#ff6600;
   background-color: #000000;
   text-align: center;
   
   }
    
  img 
  { 
     border:0px none;
    
  }
  p { padding: 0.2cm;}
</style>

Dades

How come you haven't given your #header DIV a "top" or "height" value?

To clarify, are you trying to align the header DIV 180px from the left to match the rest of the page content? If so what is happening instead of this? Or is something happening within the DIV to cause a problem?

Still a bit confused as to what's going on.

SD1990

Because at the moment i am just trying to align the div.

Yes thats what i want to do but the problem is this has no effect on the div. The only thing in the div is 2 images. No matter what type of position used or how many pixels used they wont move over !!!:mad::(

Dades

SD1990 wrote: »

Yes thats what i want to do but the problem is this has no effect on the div. The only thing in the div is 2 images. No matter what type of position used or how many pixels used they wont move over !!!:mad::(

What do mean "they" won't "move over"? The images within the DIV?

Are you sure the problem is the DIV that's not aligning 180px from the left, and not the images within it? i.e. Include a text-align left value for the DIV...

SD1990

EUREKA. I got it. What was happening was the first div in the stylesheet was being ignored for some reason ? so i put in an empty div at the top and it worked.

Thanks anyway dades and everyone else

One more thing is there a way to make the website automatically adjust to different screen resolutions ?

Liam Byrne

SD1990 wrote: »

One more thing is there a way to make the website automatically adjust to different screen resolutions ?

Yes, but it involves NOT using absolutely-positioned divs, which from the sounds of it means you're asking the question far too late in the project ?

Placebo

Question if a site is W3C complient [not strict] should it run perfectly in IE6/7 and firefox, perfectly.?

Pixelcraft

no, as IE6 does not adhere to standards, and some css properties are poorly supported or not at all.

SD1990

Yes, but it involves NOT using absolutely-positioned divs, which from the sounds of it means you're asking the question far too late in the project ?

Its never to late. Thats the only problem i have left. Everything else works. Just in 1024x768 and 800x600 you need to scroll to see the entire page.
Do i need to use a liquid layout and change everyting to float ? or is there a better way

Dades

Well you can either center and display all your content without margins and keep the widths minimal so as to fit in all resolutions, or you could use percentage widths.

For the latter, looking at your stylesheet you might consider losing some or all of the left/right margin, keeping a fixed with for your "links" and "rightsect" areas, and having your "content" stretch to in between. You'd need to float the left and right areas.

You might also consider using a container div around all content as this makes it much easier to controls margins, width, alignment etc.

SD1990

uld you explain the first solution about centering and display without margins a bit better ? Thanks

Chardee MacDennis

Placebo wrote: »

Question if a site is W3C complient [not strict] should it run perfectly in IE6/7 and firefox, perfectly.?

ha no! neither of them pass the acid test..

SD1990

Ok ive changed all the css to float an have 2 small problems

1. When the page isnt full sized on 1024 resolution the 3rd div drops down. Is this because i have all the divs on float left ? if i have the 3rd div on float right it goes over to far you see.

2. The page is to close to the left side of the screen. I want to push it over about 30 px. What is the best way to do this ?