I THINK this is a CSS question...

I THINK this is a CSS question... (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets

Message

DaveX -> I THINK this is a CSS question... (3/31/2007 22:08:52)
I've got an issue with a script/style sheet combination. The script is for a image viewer that runs along the bottom of my page. It's centered on the page and works great UNTIL I view it in IE where it shows up all the way to the left. Here's the chunk of .CSS that I'm working with: #motioncontainer { margin:0 auto; /* Uncomment this line if you wish to center the gallery on page / width: 50%; / Set to gallery width, in px or percentage / height: 350px; / Set to gallery height */ As you can see, I've commented out the necessary line. I've poked around and there are apparently some issues with having the container being related in anyway to 'center' alignment tags that cause issues with IE. Well, I get confused by 'float' and 'alignment' and such as far as actual tags go as well as 'div'. I'm slowly figuring it out though with help from a lot of you guys! Anyway, I'm sure my problem lies in here somewhere: </head> <body bgcolor="#000000"> <div align="center"> <center> <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="990" id="AutoNumber1" bordercolorlight="#000000" bordercolordark="#000000" bordercolor="#000000" bgcolor="#333333"> <tr> <td width="990" colspan="2" height="30" bordercolor="#000000" bgcolor="#333333" align="right"> <img border="0" src="images/logo.jpg" width="309" height="21"></td> </tr> <tr> <td width="990" colspan="2" height="480" bordercolor="#000000" bgcolor="#333333"> <p align="center"> <div id="loadarea" style="width: 990px"></div></td> </tr> <tr> <td align="left" height="26" bgcolor="#333333" width="495"> <img border="0" src="images/mail.jpg" width="275" height="14"></td> <td align="right" height="26" bgcolor="#333333" width="495"> <img border="0" src="images/telephone.jpg" width="188" height="13"></td> </tr> <tr> <td width="990" colspan="2" height="70" bgcolor="#333333"> <div id="motioncontainer" style="position:relative;overflow:hidden; width:800; height:65"> <div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap; width:1700; height:58"> <nobr id="trueContainer"> Now, I hope this is the appropriate section to post in as I think it has something to do with the CSS conflicting possibly? I can also post a link to the page if anyone is interested in seeing it directly...

jurgen -> RE: I THINK this is a CSS question... (3/31/2007 22:20:58)
A link will always work better to look what you have to deal with.....

DaveX -> RE: I THINK this is a CSS question... (3/31/2007 22:24:08)
Here it is: http://www.automatwebdesign.co m/jasonevans/temp.htm

jurgen -> RE: I THINK this is a CSS question... (3/31/2007 22:52:28)

 <td width="990" height="70" colspan="2" align="center" bgcolor="#333333">
    <div id="motioncontainer" style="position: relative; overflow: hidden; width: 800px; height: 65px; max-width: 1000px;">
<div id="motiongallery" style="position: absolute; left: 0pt; top: 0pt; white-space: nowrap; width: 1700px; height: 58px;">

<nobr id="trueContainer">

Change "align center and it will show up centered in IE and FF. It has nothing to do with your existing css style. It's a matter of centering your div within the table cell.

Tailslide -> RE: I THINK this is a CSS question... (4/1/2007 3:07:39)
You should really be using a DOCTYPE in all your websites - that way IE6 will at least behave predictably and will, for instance, follow modern browser behaviour when it comes to margin: 0 auto; as Firefox does. Then you won't have to add extra unnecessary styling into your markup. Without a DOCTYPE IE is in Quirks mode and you have to revert back to doing things like text-align:center to centre divs etc.

DaveX -> RE: I THINK this is a CSS question... (4/1/2007 12:23:48)
Jurgen, thanks! That helped! Tailslide, thanks for that tip! I started searching around and found a lot of info however, I tried a few and they all messed up the layout. Also, I'm not really sure how to determine which one to use. Is the idea to figure out which one to use and then tweak to fit? I suppose putting it in before you start might help? Learning more every day...

Tailslide -> RE: I THINK this is a CSS question... (4/2/2007 3:31:37)
Hi Dave This is probably the best article on the topic: http://www.alistapart.com/articles/doctype/ As you say, the best idea is to decide what type of code you want to use (HTML or XHTML for instance) and then use the DOCTYPE to fit. Strict DOCTYPES are just what they sound like - the tougher interpretation of the rules for that particular version of the markup. Transitional is meant to be a bridge between the older types of markup and whatever you've chosen - so XHTML transitional will allow stuff from HTML in it's markup whereas XHTML Strict won't. Strict is generally a better idea if you can manage it (doesn't really matter which flavour - HTML or XHTML) but it may be easier to start off with Transitional and work up to strict! Have a look at your markup - if you're tending to close tags then it'll probably be easier to stick in XHTML 1.0 Transitional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> If you tend not to close tags then go for HTML 4.0 Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> As far as it breaking your layout - well once you've got a DOCTYPE your browser has rules to work to when it tries to understand your page and if your code breaks those rules then your browser will break your page! Without a DOCTYPE the browser has to guess what you want it to do. The problem with this is that different browsers "guess" differently and they become unpredictable in what they show. This might all sound like far too much trouble to be bothering with. However the advantages are that once you start using the correct markup (DOCTYPE included) then your sites will work better cross-browser and will probably work better and for longer on the newer, more standard-compliant browsers that will continue appearing.

Page: [1]

0.0625