Css Questions
tuemmykids
Join Date: 2003-09-15 Member: 20884Members
Join Date: 2003-09-15 Member: 20884Members
<div class="IPBDescription">Cascading Style Sheets</div> I was bored today, so I decided to design a new site. Almost everything works the way it should just the navigation looks really messed up in Internet Explorer. In Firefox it works fine. Here's a pic to show you what I mean:
Internet Explorer:
<a href='http://www.imageshack.us' target='_blank'><img src='http://img138.echo.cx/img138/3892/navmessed8jj.jpg' border='0' alt='user posted image' /></a>
Firefox:
<a href='http://www.imageshack.us' target='_blank'><img src='http://img138.echo.cx/img138/4659/navok4qd.jpg' border='0' alt='user posted image' /></a>
I don't know why it's doing this, can anyone help? If you need the HTML / CSS code, it's here:
HTML: <a href='http://tuemmykids.webpal.info/design.htm' target='_blank'>http://tuemmykids.webpal.info/design.htm</a>
CSS: <a href='http://tuemmykids.webpal.info/stylesheets/styles2.css' target='_blank'>http://tuemmykids.webpal.info/stylesheets/styles2.css</a>
Please ignore everything before <div id="divHeader"> and after <div id="divFooter"> in the HTML file, it's just the ads that the host put in.
I'd also like to know if it was possible to set a minimum width for a div tag, so it can be resized but will never be smaller than x pixels.
If there's anything else you need, please say so.
Internet Explorer:
<a href='http://www.imageshack.us' target='_blank'><img src='http://img138.echo.cx/img138/3892/navmessed8jj.jpg' border='0' alt='user posted image' /></a>
Firefox:
<a href='http://www.imageshack.us' target='_blank'><img src='http://img138.echo.cx/img138/4659/navok4qd.jpg' border='0' alt='user posted image' /></a>
I don't know why it's doing this, can anyone help? If you need the HTML / CSS code, it's here:
HTML: <a href='http://tuemmykids.webpal.info/design.htm' target='_blank'>http://tuemmykids.webpal.info/design.htm</a>
CSS: <a href='http://tuemmykids.webpal.info/stylesheets/styles2.css' target='_blank'>http://tuemmykids.webpal.info/stylesheets/styles2.css</a>
Please ignore everything before <div id="divHeader"> and after <div id="divFooter"> in the HTML file, it's just the ads that the host put in.
I'd also like to know if it was possible to set a minimum width for a div tag, so it can be resized but will never be smaller than x pixels.
If there's anything else you need, please say so.
Comments
You could try putting "border: 1px #E4ECEC solid;" in the li rule.
<a href='http://www.imageshack.us' target='_blank'><img src='http://img29.echo.cx/img29/6471/navomg9mu.jpg' border='0' alt='user posted image' /></a>
EDIT: Hmm, I post too slowly... I'll try adding an invisible border like you said.
>_< I WAS GOING TO CHEW YOUR **** OUT FOR EVEN ASKING THAT QUESTION BEFORE YOU EDITED IT!
Fun spoiler.
And tuemmy, err it's IE. Their adherence to the CSS standards are spotty at best. I *think* this borks up because of the way they mangled the implementation of the CSS box model.
>_< I WAS GOING TO CHEW YOUR **** OUT FOR EVEN ASKING THAT QUESTION BEFORE YOU EDITED IT!
[...] <!--QuoteEnd--> </td></tr></table><div class='postcolor'> <!--QuoteEEnd-->
Lack of sleep makes me think unclear <!--emo&:p--><img src='http://www.unknownworlds.com/forums/html/emoticons/tounge.gif' border='0' style='vertical-align:middle' alt='tounge.gif' /><!--endemo-->
So, does anyone know how I can set a minimum width for a div tag? I want it to resize, but not get smaller than x pixels. If you resize the site the way it is now, it will get messed up.
Oh. Well that sucks. I really hope they get their act together and do something right for once.
And IE7 will have full .png support <!--emo&:D--><img src='http://www.unknownworlds.com/forums/html/emoticons/biggrin-fix.gif' border='0' style='vertical-align:middle' alt='biggrin-fix.gif' /><!--endemo-->
[/slightly ot]
I wish ALL the browsers would just stick to the standards rather than picking and choosing. :/
I wish ALL the browsers would just stick to the standards rather than picking and choosing. :/ <!--QuoteEnd--> </td></tr></table><div class='postcolor'> <!--QuoteEEnd-->
I wouldn't blast Firefox for not rendering CSS as Internet Explorer renders it: Internet Explorer has some shoddy support, as you well know. Now, Safari and Firefox should render the code the same, so you do have a point there; there are definitely bugs in Firefox's rendering engine.
tuemmykids, add display: inline; to #divNavLeft li.
I'm not. I'm blasting it for not either rendering it according to the W3 standards, or flat out not supporting the property at all.
I'm not. I'm blasting it for not either rendering it according to the W3 standards, or flat out not supporting the property at all. <!--QuoteEnd--> </td></tr></table><div class='postcolor'> <!--QuoteEEnd-->
I have had the same. It's both confusing and annoying.
And IE7 will have full .png support <!--emo&:D--><img src='http://www.unknownworlds.com/forums/html/emoticons/biggrin-fix.gif' border='0' style='vertical-align:middle' alt='biggrin-fix.gif' /><!--endemo-->
[/slightly ot] <!--QuoteEnd--></td></tr></table><div class='postcolor'><!--QuoteEEnd-->
Full as in it'll fully support all pngs, or full as in it'll finally support some basic pngs?
Having full support for png alpha masking would rock so hard, and be a wee revolution for web graphics.
edit: hmm, wait. other browsers can do them already? which rock have I been living under?
Wow, thanks, now I don't have to use those borders anymore. You're a life saver <!--emo&:D--><img src='http://www.unknownworlds.com/forums/html/emoticons/biggrin-fix.gif' border='0' style='vertical-align:middle' alt='biggrin-fix.gif' /><!--endemo-->.