Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It's FREE and there are many benefits:

  • Receive Fast Advice
  • Learn Programming Languages
  • Get Professional Website Reviews
  • Quick Troubleshooting Assistance

> Internet Explorer Positioning Bugs

This is a discussion on Internet Explorer Positioning Bugs, within the CSS section. This forum and the thread "Internet Explorer Positioning Bugs" are both part of the Designing Your Website category.

 
 Reply to this topicStart new topic
> Internet Explorer Positioning Bugs, Elements that are not displaying correctly in internet explorer
rlawford
post May 11 2009, 08:49 AM
Post #1


New Squeeze
*

Posts: 9
Joined: 7-April 09
Hi there everyone -

I have a BIG problem, I'm developing a new site for a client but on completion I noticed a few bugs that have gotten the better of me.. I cannot fix them and its getting to be a big problem. I hate IE but everything works perfectly in MZ and Safari.... Please can someone help me, i am officially stuck!

Here are my problems :

1. header.html - My company slogan is being pushed to the left.
http://www.bcom.co.za/sites/NBI/header.html

2. home.html - slide show controls are being kicked out of place.
http://www.bcom.co.za/sites/NBI/home.html

3. about_nbi.html - my thumbnail block is again being pushed to the left.
http://www.bcom.co.za/sites/NBI/about_nbi.html

4. footer.html - my text links are also being pushed to the left.
http://www.bcom.co.za/sites/NBI/footer.html

This site will be converted to JSP, but at the moment the pages are individual and work by themselves. I am using a blueprint css file and a main include css file:
1. http://www.bcom.co.za/sites/NBI/css/header.css - main css
2. http://www.bcom.co.za/sites/NBI/css/Fluid_Blueprint.css - blueprint.

Any help here would be hugely appreciative! I am stuck and anyone who could help me rocks!

Thanks guys!

Rob


--------------------
Go to the top of the page
 
+Quote Post
Linda
post May 11 2009, 09:05 AM
Post #2


Co-Founder
Group Icon

Posts: 5,982
Joined: 13-February 08
From: Pink House in USA
Hi Rob!
When you get issues like you are having, the wisest thing to do is have another css stylesheet specifically for IE7 and a separate one for IE6.

I place this code between the <head></head>
CODE
<!--[if IE 7]>
<link rel="stylesheet" href="ie7only.css" type="text/css">
<![endif]-->

<!--[if IE 6]>
<link rel="stylesheet" href="ie6only.css" type="text/css">
<![endif]-->


With that code, I can make two additional stylesheets and set the css so it works perfectly.

I save a css as ie7only.css. In that I change the css needed to make things work correctly in IE. There is no need to place ALL the css from the current css; just the bits that are out of alignment.

For instance, the right emblem which I think is your site name can have a class. Add some margin-left or padding left to move it over to the desired location.

Do this for all the misalignments.

Hope this helps.


--------------------
Cozy Penguin Web Studio
Go to the top of the page
 
+Quote Post
rich97
post May 11 2009, 11:04 AM
Post #3


Squeeze Machine
Group Icon

Posts: 852
Joined: 27-August 08
From: Sendai, Japan
Wow, thats a real tough one. I'm going to try and tackle the header first.

First, are you using a PNG hack for IE? I assume no, as the PNG isn't fixed but it could just be something going wrong with it. Most of the PNG hacks out there destroy the background CSS postion but once again, I dont think this is the issue. In order to save yourself some effort and a performance hit I would recomend changing the logo to either a PNG with no alpha channel (I.E. solid fill) or to a GIF.

To fix that error, you could do a little ducking and diving. Try removing the wrapping div #headerWrap then setting #logo to width:100% and background-position:center top or if you.

The other option is to find out what actually causing it. Here are some possible reasons for the footer bug.

1. The blueprint.css file. I use an adapted version of the blueprint.css (fixed width) myself, I have found that they include a list of IE hacks which are somethings more harmful than helpful. Try removing any and all IE specific hacks from the stylesheet.

2. Double class/id bug. If you have a tag that looks like this <div class="column span-24" id="footer"></div> it will only use the rules for the last referenced ID/class. In your case #footer

3. In the footer you have spelt column wrong. I dont understand why that would effect IE and not other browsers (especially if IE is ignoreing it anyway) but it might be a contributing factor.

4. It may also very well be our old friend hasLayout. In case you don't know, hasLayout is a propriety property introduced by MS in both IE6 & 7 that is the main cause many IE bugs, and the consequental damage to your mental heath debugging IE brings. It occurs then you don't give an element a fixed width/height, and something else, I forget, I don't know all the details but if you try giving your footer a fixed width and height and it fixes it then you are going to need to find a work around. Perhaps rearranging the HTML then setting display:inline and text-align:center.

Sorry I can't help more. I will look again when I have more time. In the mean time, here are two links that may prove useful:

Firebug Lite - Firebug for other browsers. but as good as the original but still helpful.

Fix It Fast: Rapid IE6 CSS Debugging - An excelent article on debugging IE6, Hopefully will give you some hint as to the cause of the problem.


--------------------
Tweet Tweet
My new (under construction) site
My work family
Go to the top of the page
 
+Quote Post
rlawford
post May 12 2009, 01:56 AM
Post #4


New Squeeze
*

Posts: 9
Joined: 7-April 09
Hey thanks guys for your input, Rich i will get onto these now and see if i can pin point them...

Thanks so much for your effort i know it must be crazy trying to figure this **** out hahaha ya...

Shot!


--------------------
Go to the top of the page
 
+Quote Post
« Next Oldest · CSS · Next Newest »
 
If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!
 Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No new   16 1christopher 2,241 21st February 2008 - 04:30 PM
Last post by: 1christopher
No New Posts 10 Popje 1,495 2nd April 2008 - 07:19 PM
Last post by: jamesicus
No New Posts 2 xkatx21x 875 27th February 2008 - 09:51 PM
Last post by: xkatx21x
No new   27 Mark 3,639 19th March 2008 - 01:16 PM
Last post by: Daniel
No new   16 Jacob 1,749 4th June 2008 - 06:49 AM
Last post by: Linda