Sign In »
Register Now!
Help
Posted 11 May 2009 - 08:49 AM
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.z...NBI/header.html
2. home.html - slide show controls are being kicked out of place.
http://www.bcom.co.z...s/NBI/home.html
3. about_nbi.html - my thumbnail block is again being pushed to the left.
http://www.bcom.co.z.../about_nbi.html
4. footer.html - my text links are also being pushed to the left.
http://www.bcom.co.z...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.z.../css/header.css - main css
2. http://www.bcom.co.z...d_Blueprint.css - blueprint.
Any help here would be hugely appreciative! I am stuck and anyone who could help me rocks!
Thanks guys!
Rob
Page 1 of 1
Internet Explorer Positioning Bugs Elements that are not displaying correctly in internet explorer
#2
Linda 
- Chief Operations Officer
-
- Group: Founders
- Posts: 6,400
- Joined: 13-February 08
- Gender:Female
- Location:Pink House in USA
Posted 11 May 2009 - 09:05 AM
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>
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.
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>
<!--[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.
#3
rich97
- Squeeze Machine
-
- Group: Mentor
- Posts: 858
- Joined: 27-August 08
- Gender:Male
- Location:Sendai, Japan
Posted 11 May 2009 - 11:04 AM
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.
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.
#4
rlawford
- New Squeeze
-
- Group: Members
- Posts: 9
- Joined: 07-April 09
- Gender:Male
Posted 12 May 2009 - 01:56 AM
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!
Thanks so much for your effort i know it must be crazy trying to figure this **** out hahaha ya...
Shot!
Share this topic:
Page 1 of 1
Page 1 of 1
| Trackback URL | Trackback Date | Total Hits |
|---|---|---|
Page 1 of 1
| Topic | Started By | Stats | Last Post Info | |
|---|---|---|---|---|
 |
The Eagle Has Landed - Young Internet Alliance Is Formed!
|
1christopher |
|
|
 |
Positioning Problems
Trying to position an <iframe> |
Popje |
|
|
|
Positioning Problems With Ie
|
xkatx21x |
|
|
|
No Internet For A Day
sucks.. |
Mark |
|
|
|
Internet Closing Down?!
WTF!!! |
Jacob |
|
|
RSS Feed
Email Feed
TWS Podcast
@thewebsqueeze
TWS on Facebook
TWS on LinkedIn
TWS on YouTube