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 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
> 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
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)
> 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
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
"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.
"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
>> 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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
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
**********
|
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>
|
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...
|
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">
|
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
| |
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>
|
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">
|
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!!
|
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*/
|
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...
|
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,...
| |
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...
|
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,...
|
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...
|
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...
|
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();...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |