473,386 Members | 1,830 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,386 software developers and data experts.

CSS help with inline list navigation

mp
I'm trying to build my first site (learning how to code by hand) using
XHTML and CSS. I've done a lot of reading but I can't figure out
what's going on here. I'm trying to generate tabs for a horizontal
navigation system using only XHTML and CSS. I put up a section of
code at http://www.xmission.com/~mpyne/help_me/subnavonly.html. I
also put a screen capture of the code in 4 browsers (NS6.2, Mozilla
1.5, Opera 7.1, and IE6/Win) at
http://www.xmission.com/~mpyne/help_me/subnavonly.jpg.

I colored the different sections and used some borders so I can see
what's going on. NS & Moz look the same, but I get two other
renditions in Opera and IE6.

Questions:
1) What bugs in the browsers are causing the different renditions and
how can I correct or hack around them?
2) Why is the unordered list indented from the left? If you look at
the source, you'll see that I figured out a way around this, but I'm
not sure if it's the best or correct way. I want my tabs to be flush
left with the div.
3) Why is there space between when I remove the float from the
anchors? Is there some default spacing?

Any help is much appreciated. If you can point me to any links, etc.,
I can refer to, that is also very helpful. I've not been able to find
any for this problem.

Mike
Jul 20 '05 #1
3 3069
go**********@yahoo.com (mp) wrote:
http://www.xmission.com/~mpyne/help_me/subnavonly.html
http://www.xmission.com/~mpyne/help_me/subnavonly.jpg

I colored the different sections and used some borders so I can see
what's going on. NS & Moz look the same, but I get two other
renditions in Opera and IE6.

Questions:
1) What bugs in the browsers are causing the different renditions and
how can I correct or hack around them?
Unusually, none that I can see at a glance. The dashed border only
appearing in bloatzilla is because "orange" is a "recent addition" /
"non-standard crap" to the colour keywords. Use a hex number like
#ffff00, instead of keywords.
2) Why is the unordered list indented from the left? If you look at
the source, you'll see that I figured out a way around this, but I'm
not sure if it's the best or correct way. I want my tabs to be flush
left with the div.
Because it's a list - browsers have been indenting lists for donkeys'
years. If you don't want the default styling of a list, why mark it as
a list? Are you sure this "list" actually contains listular data?

As you've already discovered, bloatzilla implements the indentation
with padding, Opera Explorer with margin. That's okay.

3) Why is there space between when I remove the float from the
anchors? Is there some default spacing?


Space between what and what when viewed with what?
Jul 20 '05 #2
Karl Smith wrote:
go**********@yahoo.com (mp) wrote:
2) Why is the unordered list indented from the left? If you look at
the source, you'll see that I figured out a way around this, but I'm
not sure if it's the best or correct way. I want my tabs to be flush
left with the div.

Because it's a list - browsers have been indenting lists for donkeys'
years.


Yes
If you don't want the default styling of a list, why mark it as
a list?


Huh? The question should be "If you don't want the default styling of a
list, why not change it with CSS?" or "If you don't think it's a list,
why mark it as a list?"
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
Jul 20 '05 #3
*Karl Smith*:

The dashed border only appearing in bloatzilla is because "orange"
is a "recent addition" / "non-standard crap" to the colour keywords.
That's unlikely the reason, because virtually all desktop browsers since
Mosaic support the X11 color names and have done so for many years, i.e.
even before there was CSS.
To codify this ill set of color names, which was obviously assembled by some
stoned kids, in CSS is IMHO not a good thing, but for it is in SVG already
(with added 'gray'/'grey' variants) the CSS-WG will definitely put it into
CSS3 Color (not to become "Colour"). 'orange' however is one of the few sane
names therein and being officially introduced with CSS 2.1 already. It's
also the only one I frequently use when I'm to lazy to start a colour
picker.
Are you sure this "list" actually contains listular data?


Funny word, "listular".

--
Reality is an illusion that occurs due to the lack of alcohol.
Jul 20 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: eternalD3 | last post by:
Hi, I have a problem to get this working on Opera 7.x+. This does not need to work on older Opera browsers There are problems on rendering the sub-level navigation. It aligns right on Firefox...
2
by: Eric Lindsay | last post by:
I have been trying to do a CSS liquid layout imitating a frame, using position: fixed for header, footer, and side navigation, and a fixed background image. Page is valid HTML 4.01 Strict, and is...
1
by: books1999 | last post by:
Hi there, I have a problem with this css/div and i cannot work it out. I would like either container to be able to push the background box to grow but in Firefox it overflows. Can someone find a...
2
by: george.leithead | last post by:
Hi all, I have a very strange problem! In following Web page (which is generated from a CMS System), the navigation to the left 'dissapears' when you roll the mouse over the links? It does not...
3
by: Jannette | last post by:
I've got this to finally work in IE (its only taken me 2 days solid), but now mozilla isn't displaying the text on the same line as the image. I'm a newby at CSS, and I've think I've worked on trying...
2
by: nevenuf24 | last post by:
Anyone know why my top and bottom border is not showing in Internet Explorer 6 for my navigation bar? There should be a border around the word home and borders around each link as you roll over it....
6
by: Markus | last post by:
Hello I have a navigation structured as follows: <ul> <li> <a>Chapter1</a> <ul> <li><a>Chapter 1.1</a></li> <li><a>Chapter 1.2</a></li>
5
by: Awok | last post by:
Hi, i've been stuck trying to get the following code to display correctly in IE in which i've come across many diffrent theories but none which have worked possibly the box model problem. ...
3
by: rassklass | last post by:
HI all, I have designed a site found at www.pickupnewspapers.co.uk/nottinghamshire/index.html but I cant get the footer to sit stil on the page. It is because of the javascript ticker, everytime...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.