Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > <ul> not showing in Internet Explorer but is in Firefox!

Reply
Thread Tools

<ul> not showing in Internet Explorer but is in Firefox!

 
 
Joker7
Guest
Posts: n/a
 
      03-31-2005
The little circle is showing up in Firefox but not
Internet Explorer,there me working away to get all
to work with Firefox now it Internet Explorer
giving me a problem.

Any ideas or pointers.

Thanks
Chris

html//
<ul class=nav>
<li><a href="http://test.php"
target="_self">Test</a></li>
<li><a href="http://test.php"
target="_self">Test</a></li>
</ul>

css//
ul.nav{
color: #fd9;
float: left; clear: left;
margin: 0em 1em 0em 0em;
padding: 0;
line-height: 1em;
font-size:12px;
list-style-type:circle;}

a:link{
color: #fd9;
text-decoration: none;}

a:visited{
color: #fd9;
text-decoration: none;}

a:hover{
color: #fec;
text-decoration: underline;}




--
Never argue with an idiot. They will drag you down
to their level,and beat you with experience


 
Reply With Quote
 
 
 
 
Steve Pugh
Guest
Posts: n/a
 
      03-31-2005
"Joker7" <(E-Mail Removed)> wrote:

>The little circle is showing up in Firefox but not
>Internet Explorer,there me working away to get all
>to work with Firefox now it Internet Explorer
>giving me a problem.
>
>css//
>ul.nav{
>color: #fd9;
>float: left; clear: left;
>margin: 0em 1em 0em 0em;
>padding: 0;
>line-height: 1em;
>font-size:12px;
>list-style-type:circle;}


Have a look at http://steve.pugh.net/test/test37.html

IE places the bullet outside the <ul>. Firefox places the bullet
inside the <ul> but outside the <li>.

By setting the left margin of the <ul> to zero you puish the bullet
either further to the left in IE but not in FF.

For cross browser compataibility of list bullets you need to think
about margin-left and padding-left of <ul> and margin-left of <li>.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <(E-Mail Removed)> <http://steve.pugh.net/>
 
Reply With Quote
 
 
 
 
Blinky the Shark
Guest
Posts: n/a
 
      03-31-2005
Steve Pugh wrote:
> "Joker7" <(E-Mail Removed)> wrote:


>>The little circle is showing up in Firefox but not
>>Internet Explorer,there me working away to get all
>>to work with Firefox now it Internet Explorer
>>giving me a problem.


>>css//
>>ul.nav{
>>color: #fd9;
>>float: left; clear: left;
>>margin: 0em 1em 0em 0em;
>>padding: 0;
>>line-height: 1em;
>>font-size:12px;
>>list-style-type:circle;}


> Have a look at http://steve.pugh.net/test/test37.html


> IE places the bullet outside the <ul>. Firefox places the bullet
> inside the <ul> but outside the <li>.


How'd I luck out? IE and FF render this page (and my other relevant
ones) the same, here, with respect to bullet placement, without any
conscious manipulation via margins on my part.

http://blinkynet.net/stuff/comp/bullets.gif

http://blinkynet.net/humor/index.html

--
Blinky Linux Registered User 297263
Who has implemented Usenet Solution #45933:
Now killing all posts originating at Google Groups

 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      03-31-2005
Blinky the Shark <(E-Mail Removed)> wrote:
>Steve Pugh wrote:
>
>> IE places the bullet outside the <ul>. Firefox places the bullet
>> inside the <ul> but outside the <li>.

>
>How'd I luck out? IE and FF render this page (and my other relevant
>ones) the same, here, with respect to bullet placement, without any
>conscious manipulation via margins on my part.
>
>http://blinkynet.net/humor/index.html


You haven't set any styles at all for your lists. So the browsers use
their default styles, which happen to look very much the same even
though they're achieved very differently.

Imagine two browsers, one of which has
P {margin-left: 20px;}
as default, and the other has
P {padding-left: 20px;}

On most pages you wouldn't see any difference between the two. But
then look at a page where the author has set a border round
paragraphs...

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <(E-Mail Removed)> <http://steve.pugh.net/>
 
Reply With Quote
 
Blinky the Shark
Guest
Posts: n/a
 
      03-31-2005
Steve Pugh wrote:

> Blinky the Shark <(E-Mail Removed)> wrote:
>>Steve Pugh wrote:


>>> IE places the bullet outside the <ul>. Firefox places the bullet
>>> inside the <ul> but outside the <li>.


>>How'd I luck out? IE and FF render this page (and my other relevant
>>ones) the same, here, with respect to bullet placement, without any
>>conscious manipulation via margins on my part.


>>http://blinkynet.net/humor/index.html


> You haven't set any styles at all for your lists. So the browsers use
> their default styles, which happen to look very much the same even
> though they're achieved very differently.


> Imagine two browsers, one of which has
> P {margin-left: 20px;}
> as default, and the other has
> P {padding-left: 20px;}


Gotcha.

--
Blinky Linux Registered User 297263
Who has implemented Usenet Solution #45933:
Now killing all posts originating at Google Groups

 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      04-01-2005
Joker7 wrote:

> ul.nav{
> margin: 0em 1em 0em 0em;
> padding: 0;
> }


Bit of advice. Whenever you tinker with margins or padding on OL, UL or LI
elements, explicitly set *all* the padding and margins for OL, UL and LI
elements.

Different browsers have wildly different CSS defaults for lists.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

 
Reply With Quote
 
Joker7
Guest
Posts: n/a
 
      04-01-2005

"Steve Pugh" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
::
: Have a look at
http://steve.pugh.net/test/test37.html
:
: IE places the bullet outside the <ul>. Firefox
places the bullet
: inside the <ul> but outside the <li>.
:
: By setting the left margin of the <ul> to zero
you puish the bullet
: either further to the left in IE but not in FF.
:
: For cross browser compataibility of list bullets
you need to think
: about margin-left and padding-left of <ul> and
margin-left of <li>.
:
: Steve
:
: --
: "My theories appal you, my heresies outrage you,
: I never answer letters and you don't like my
tie." - The Doctor
:
: Steve Pugh <(E-Mail Removed)>
<http://steve.pugh.net/>

Thanks Steve,



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Internet Explorer 8: C:\Program Files\Internet Explorer\iexplore.exe vs C:\Program Files (x86)\Internet Explorer\iexplore.exe Nathan Sokalski Windows 64bit 16 02-22-2010 08:31 AM
code displays PDF directly from Windows explorer but not when called by II6 to Internet explorer Ed Hauptman HTML 7 08-07-2009 10:11 PM
internet explorer 7 - Internet Explorer cannot display the webpag sandy j Windows 64bit 0 05-02-2009 02:12 AM
Sh Crypto isakmp sa is showing Active but Tunnel is showing line protocol down. urvin Cisco 0 04-15-2008 08:17 AM
Internet Explorer 6 Not Showing Backgrounds me Computer Information 0 10-30-2004 08:36 AM



Advertisments