[thelist] CSS again: suspected IE funkiness on inline UL

Toby toby at creativefibre.co.uk
Tue Dec 19 06:41:03 CST 2006


http://www.intranetintelligence.com/ii/meyertab.asp

Hmm I have had a look at this and you are missing some fundamental parts for
this to be maintainable, for starters you need to comment it and structure
it better, for yourself and so that other people can look at it.

Can I recommend you remove all styling and place the following rule at the
top of your page:

* {margin: 0em; padding: 0em; border: none 0px #fff;}

This clears most of the browser funkyness until you get to forms.

Then...

html, body{
  font: ;
  color: ;
  background: ;
}

Now that clears up the rest of your css document a lot. Setting a standard
for the presentation.

After this most people would then style the elements you will be using in
the html such as h1/p/ul/li/ as well as some class's which are likely to use
often.

Try and ensure you don't have any pointless statements also, I noticed you
specified a wrapper with margin: 0px auto; this is appears unnecessary on
your website and could conflict with other styling. Also I don't know why
you have specified height as 101% for the html element, I have never needed
to do this before myself...

And last but not least, don't forget that css is read from the top down!

Hope all that helps,
Toby

> -----Original Message-----
> From: thelist-bounces at lists.evolt.org [mailto:thelist-
> bounces at lists.evolt.org] On Behalf Of Toby
> Sent: 19 December 2006 11:01
> To: thelist at lists.evolt.org
> Subject: Re: [thelist] CSS again: suspected IE funkiness on inline UL
> 
> I think you need to practise isolating issues and debugging issues like
> this
> as you appear to have problems doing that alone. Its not particularly easy
> to start with, and is time consuming (including head banging against the
> wall time) but you will get there and learn in a different way to people
> showing you via email.
> 
> In respect to your problem, I recommend you remove _all_ styling and start
> from the top with a * rule to clear most of the browser defined styles.
> This
> will avoid your own personal confusions with your project and give you a
> fresh outlook on how you are building your css & xhtml. If you respond to
> this post please post your link again so I can review it. If you haven't
> used it already get the webdeveloper toolbar by Chris Pedrick for FF also
> >
> http://chrispederick.com/work/webdeveloper/
> 
> Hope that helps,
> Toby
> 
> > -----Original Message-----
> > From: thelist-bounces at lists.evolt.org [mailto:thelist-
> > bounces at lists.evolt.org] On Behalf Of ben morrison
> > Sent: 19 December 2006 10:36
> > To: thelist at lists.evolt.org
> > Subject: Re: [thelist] CSS again: suspected IE funkiness on inline UL
> >
> > On 12/19/06, Joel D Canfield <joel at spinhead.com> wrote:
> >
> > > While I certainly don't wish to seem unappreciative of the many people
> > > here who've taken time (sometimes quite a bit) to look at this and
> come
> > > up with ideas, in the end, it really seems like we're all guessing.
> > >
> > > Is CSS really this complicated? I mean, I'm new at this kind of thing,
> > > so I'm not entirely surprised that I'm not finding the problem. But
> when
> > > I've clearly identified that the problem is *not* the navigation code,
> > > which works *perfectly* in the source page, but when copied *verbatim*
> > > to my page, breaks - well, it seems like everyone is trying to solve
> the
> > > wrong problem, or just plain guessing.
> > >
> > > Again, I'm just trying to get my head around the big picture: is CSS
> > > really a matter of guessing, twiddling, and voodoo? I do understand
> that
> > > IE is a massive PITA and that, sometimes, the rules don't apply. But
> can
> > > it really be this random?
> >
> > CSS is complicated to begin with, but you do end up understanding its
> > foibles and IEs bugs the more you use it. When you say copied
> > *verbatim* and it breaks, then generally there is something that is
> > missing, be it a parent having an effect on its child, doctype and
> > very often and really annoyingly - whitespace can have a big effect
> > when it comes to lists.
> >
> > I did post some code but our evaluation server is down as we have just
> > moved office. My version involved using a background image - only
> > needs to be 1x1 pixel in the blue border colour and here's the code:
> >
> > <style type="text/css">
> > 	#navlist {
> > color: #ffffff;
> > background:#ededed url(nav-bottom.gif) 0 100% repeat-x;
> > text-align: left;
> > margin:0px;
> > padding:0px;
> > width: 100%;
> > clear:both;
> > float:left;
> > }
> >
> > #navlist li {
> > margin:0px 10px 0 0;
> > float:left;
> > list-style:none;
> > }
> >
> > #navlist li a {
> > font-weight:bold;
> > color: #ffffff;
> > background-color: #ff6600;
> > text-decoration: none;
> > padding: 0 1em;
> > float:left;
> > display:block;
> > margin-top:1px;
> >
> > }
> >
> > #navlist li span {
> > font-weight:bold;
> > color: #000066;
> > background-color: #ffffff;
> > text-decoration: none;
> > padding: 0 1em;
> > border: 1px solid #000066;
> > border-bottom: 1px solid #ffffff;
> > float:left;
> > display:block;
> > }
> >
> > #navlist li a:hover {
> > font-weight:bold;
> > color: #ff6600;
> > background-color:#ffffff;
> > }
> >
> > 	</style>
> >
> > <ul id="navlist">
> > 			<li><span>Home</span></li>
> > 			<li><a href="/ii/services.asp" title="link to a list
> and
> > explanation of our services">Services</a></li>
> > 			<li><a href="/ii/intranet/" title="link to samples
> of
> > our tools,
> > and soon, a live demo!">Demo</a></li>
> > 			<li><a href="/ii/about.asp" title="link to
> information
> > about the
> > principals of Intranet Intelligence">About</a></li>
> > 			<li><a href="/ii/distinction.asp" title="why you
> should
> > choose
> > 'Intranet intelligence'">Why Choose Us?</a></li>
> > 			<li><a href="/ii/contact.asp" title="link to the
> contact
> > form">Contact</a></li>
> > 		</ul>
> >
> > Ben
> > --
> >
> > * * Please support the community that supports you.  * *
> > http://evolt.org/help_support_evolt/
> >
> > For unsubscribe and other options, including the Tip Harvester
> > and archives of thelist go to: http://lists.evolt.org
> > Workers of the Web, evolt !
> 
> --
> 
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
> 
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !




More information about the thelist mailing list