[WSG] Negative Vertical Margins in IE
Hey guys, I'm invoking the CSS gods out there once again. The page I'm working on (http://tribolum.com/test/navmedia/about/) displays perfectly (so far) in Firefox and Safari, but IE6/PC bombs it. Big surprise there. For the h1 span element (image replacement) I use a -20px margin to undo a 20px margin set on the content div. IE6/PC lines up the image correct horizontally, but pushes it up 20px into the navigation bar. I also use a negative -40px margin-bottom on the h1 element to pull the Who Are We? up. On Firefox, I can do a -50px. On Safari I can only do a -40px, while on IE/Mac, the heading disappears under the h1 graphic. I'm tempted to perform a kill bill volume 3 on my own. Lucian * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] Negative Vertical Margins in IE
Lucian Teo wrote:
Hey guys,
I'm invoking the CSS gods out there once again.
The page I'm working on (http://tribolum.com/test/navmedia/about/)
displays perfectly (so far) in Firefox and Safari, but IE6/PC bombs
it. Big surprise there.
For the h1 span element (image replacement) I use a -20px margin to
undo a 20px margin set on the content div. IE6/PC lines up the image
correct horizontally, but pushes it up 20px into the navigation bar.
I also use a negative -40px margin-bottom on the h1 element to pull
the Who Are We? up. On Firefox, I can do a -50px. On Safari I can
only do a -40px, while on IE/Mac, the heading disappears under the h1
graphic.
I'm tempted to perform a kill bill volume 3 on my own.
Lucian
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
*
Hi Lucian!
I had the same problem with margins in IE. I fixed margin problems in my
css by some hacks, but I couldn't force IE 5.5 to output it right. So, I
used browser detect script[1] and created file called ie55.css with
right margins for IE 5.5. In the head element I included the following
lines:
script type=text/javascript src=browser_detect.js/script
script type=text/javascript
if(browser.isIE55 == true)
{
document.write('link rel=stylesheet type=text/css
href=ie55.css');
}
/script
[1] http://www.dithered.com/javascript/browser_detect/index.html
Good luck!
Peter A. Shevtsov
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
*
Re: [WSG] Negative Vertical Margins in IE
I had the same problem with margins in IE. I fixed margin problems in my css by some hacks, but I couldn't force IE 5.5 to output it right. So, I used browser detect script[1] and created file called ie55.css with right margins for IE 5.5. Rather than using JavaScript for browser detection, try Microsoft's own built-in hack: conditional comments. They will work in all versions of IE regardless of whether JavaScript is enabled or not and every other user agent in the entire universe will just see a comment. More info: http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp Cheers, K. -- Kay Smoljak http://kay.smoljak.com * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
