473,804 Members | 3,085 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

2 lists: 1 left aligned and 1 right aligned on same line

JB
Hi All,

Why doesn't this work in Firefox but is perfect in IE6?

In IE6, the text is on the same line but in Firefox, the left aligned text
is on the line above the right aligned text.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitl ed Document</title>
<style type="text/css">
<!--
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 77%;
margin: 0;
padding: 0;
}
a, a:visited {
color: #00f;
text-decoration: none;
}
a:hover {
color: #f60;
text-decoration: underline;
}
#basicnav {
padding: 4px 0;
margin: 0;
width: 100%;
background-color: #999;
border-top: 1px solid #ccc;
border-bottom: 1px solid #000;
}
#basicnav a, #basicnav a:visited {
color: #fff;
text-decoration: none;
font-weight: bold;
}
#basicnav a:hover {
color: #000;
text-decoration: underline;
font-weight: bold;
}
#topleftnavlist li {
display: inline;
list-style-type: none;
float: left;
padding-left: 20px;
}
#toprightnavlis t li {
display: inline;
list-style-type: none;
float: right;
padding-right: 20px;
}
-->
</style>
</head>

<body>

<div id="basicnav">

<ul id="topleftnavl ist">
<li><a href="#">Home</a></li>
</ul>

<ul id="toprightnav list">
<li><a href="#">Site map</a></li>
<li><a href="#">Sell our products</a></li>
<li><a href="#">Contac t us</a></li>
</ul>

</div>

</body>
</html>

Thanks,

JB
Feb 23 '06 #1
19 2030
JB <me@here.com> wrote:
Why doesn't this work in Firefox but is perfect in IE6?
You specified "display: inline" for the LI elements, but not for the UL
elements that contain them. That might have something to do with it.
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 77%;


Please don't inflict microfonts on your readers. Normal body text should
use a font size of 100%. Only legalese and similar fine-print should use
smaller fonts.
--
Darin McGrew, mc****@stanford alumni.org, http://www.rahul.net/mcgrew/
Web Design Group, da***@htmlhelp. com, http://www.HTMLHelp.com/

"If you find yourself in a hole, stop digging." - Will Rogers
Feb 24 '06 #2
JB
> You specified "display: inline" for the LI elements, but not for the UL
elements that contain them. That might have something to do with it.


I added:

#basicnav ul{
display: inline:
}

but it didn't line them up :(
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 77%;


Please don't inflict microfonts on your readers. Normal body text should
use a font size of 100%. Only legalese and similar fine-print should use
smaller fonts.


I took this font-sizing from an article on alistapart.

Thanks for your feedback.

Jeff
Feb 24 '06 #3
Thu, 23 Feb 2006 23:32:00 -0000 from JB <me@here.com> :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


Please don't post HTML or CSS; give us the URL so that we can try it
using our browsers.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you
Feb 24 '06 #4
JB wrote:

Why doesn't this work in Firefox but is perfect in IE6?

<ul> is the block element you want to float, not the <li>s.
You need only set the right nav <ul> float:right.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Feb 24 '06 #5
JB
> Please don't post HTML or CSS; give us the URL so that we can try it
using our browsers.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA

Hi Stan,

URL is: http://www.borovere.plus.com/css/new.htm

I tried removing the float:left but that messed it up in IE6.

I could have achieved what I want using a <table> in seconds but I must
stick with using CSS! Help!

Jeff
Feb 24 '06 #6
JB
Ok, I've got it working perfectly in IE6 but the background is not covering
the DIV area in Firefox - any ideas why?

http://www.borovere.plus.com/css/new.htm

The links are white so are invisible unless the DIV background colour is
displayed behind them. Do I need to specify a height for the #basicnav DIV?

Thanks,

Jeff
Feb 24 '06 #7
JB

"JB" <me@here.com> wrote in message
news:43******** *************** @ptn-nntp-reader03.plus.n et...
Ok, I've got it working perfectly in IE6 but the background is not
covering the DIV area in Firefox - any ideas why?

http://www.borovere.plus.com/css/new.htm

The links are white so are invisible unless the DIV background colour is
displayed behind them. Do I need to specify a height for the #basicnav
DIV?

Thanks,

Jeff


:-(

I just tried shrinking the browser size and it all messes up and wraps to
multiple lines as the window gets smaller.

Long live Tables. CSS is a nightmare.
Feb 24 '06 #8
"JB" <me@here.com> wrote in message
news:43******** *************** @ptn-nntp-reader03.plus.n et...

"JB" <me@here.com> wrote in message
news:43******** *************** @ptn-nntp-reader03.plus.n et...
Ok, I've got it working perfectly in IE6 but the background is not
covering the DIV area in Firefox - any ideas why?

http://www.borovere.plus.com/css/new.htm

The links are white so are invisible unless the DIV background colour is
displayed behind them. Do I need to specify a height for the #basicnav
DIV?

Thanks,

Jeff


:-(

I just tried shrinking the browser size and it all messes up and wraps to
multiple lines as the window gets smaller.

Long live Tables. CSS is a nightmare.


What you have described is considered an asset of fluid design. You could
specify a fixed width in pixels. Ducking back into my hole now.
IEDesigner
Feb 24 '06 #9
JB
>> I just tried shrinking the browser size and it all messes up and wraps to
multiple lines as the window gets smaller.

Long live Tables. CSS is a nightmare.


What you have described is considered an asset of fluid design. You could
specify a fixed width in pixels. Ducking back into my hole now.
IEDesigner


Hee Hee. I was almost crucified here recently for using fixed width!

Jeff
Feb 24 '06 #10

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

Similar topics

3
638
by: Jeff Thies | last post by:
I have search results coming back and they need to be numbered. Sounds like an ordered list... It needs to look like this: 1. ********** line one of information * image* line two of information **********
3
2601
by: Saku | last post by:
Greetings, I'm having problems with correct rendering of an aligned image and list items. The following test page demonstrates the issue: ----------clip---clap---clip---clap---------- <html> <head> <title>Test Page</title> </head>
7
4253
by: Neil Zanella | last post by:
Hello, I have posted the following message before but got no replies... I am trying to format an HTML definition list with CSS so that it appears as follows, but am having the following problem: when the definition term (<dt>) on the left is too long, as in the HTML code posted below, the whole definition list gets messed up. I have tested the example with mozilla 1.2.1. Complete code is provided below so you can see what I mean. Anyone...
3
2427
by: Andrew | last post by:
Hi I've tried a number of techniques but this one is causing me to wonder whether I'm going to have to go back to using tables to solve this: I want to have some text aligned to the left and then on the same line a menu constructed with a horizontal unordered list. Also the page where they sit resizes to fit the browser window. Here's the xhtml: <div id="navwrap">
6
100412
by: Craig Thomson | last post by:
How can I have some text aligned to the left of the page and some more text aligned to the right using only CSS without a table? SPAN doesn't have any alignment, and there is only a single DIV block per line, and so only one alignment. TIA Craig
3
2057
by: Sven Rudolph | last post by:
Hello list, I'm trying to create a list of items with price tags. The visual appearance I want to achieve is that the description should be aligned to the left, wether the price should be aligned to the right. This ist the HTML code I used: <div id="test"> <ul>
6
5044
by: mno | last post by:
Hi all, I have a problem that I've been stuck with for the last couple of days that's driving me a bit more than crazy at this point. Sorry if this message is not very clear. I have a design that resembles the following: <div id="main"> <div class="image">
3
7880
by: Sjef Janssen | last post by:
Is it possible to have a box (div) which sets a background-color and which contains (on the same line) text which is left aligned and text which is right aligned. (as in a table: two td's left one left aligned, right one right aligned). Thanxs!!
12
4502
by: Michael7 | last post by:
Hi Everyone, I've been trying to get two blocks of text to be aligned, one left, one right, on the same line. What I'm trying to mimic is what I did with tables here: http://www.workmenforChrist.org (under the "Site Map" link) I tried floating the blocks with the code: /*Right box on the index page*/
0
9704
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9569
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10318
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10302
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9130
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7608
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6844
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5636
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
3802
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.