Hi there...
Is it possible to make a list without using the tab?
I'm using this now (Adobe GoLive 5):
<ul>
<li>Option A
<li>Option B
<li>Option C
</ul>
Thnx,
LeonIE automaticaly blockquotes(tabs) the UL, whereas FireFox does not. The only way I know to get around it is to use a CSS hack and apply a negative margin-left.Thnx, i'll give that a try....
And is it possible to use instead of the bullet a '>'. I don't want to use an image for this.It seems to me that you can't use a '>' for a list unless it is an image (I could be wrong, but...).
If you want to get rid of the disc, you can use this :
<style type="text/css">li {list-style: none;}</style>
List-style properties are here. (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/generate.html#lists">http://www.w3.org/TR/REC-CSS2/generate.html#lists</a><!-- m -->)Hmm, thnx..
But if I use an image it looks different in every browser.
- PC explorer, image too close at the text
- MAC Safari, image looks fine
- Mac Explorer, image too high
- MAC Firefox, image too low
- PC Netscape, image too low
Is there a solution to get the same result in all the browsers?Probably not because different browsers render CSS in different ways.<ul style="list-style:none;">
<li>> Option A
<li>> Option B
<li>> Option C
</ul>
or have an image as background to liOriginally posted by soccer362001
IE automaticaly blockquotes(tabs) the UL, whereas FireFox does not.
It does for me.
Originally posted by soccer362001
The only way I know to get around it is to use a CSS hack and apply a negative margin-left.
Unless we are talking about different things, there is no need for a hack. Just set the padding: and margin: to 0.Well, I've choosen for the square bullets... That works in all the browsers correct.
But is it possible to give the bullets an other color than the text?Originally posted by maw_webdesign
Well, I've choosen for the square bullets... That works in all the browsers correct.
Yes.
Originally posted by maw_webdesign
But is it possible to give the bullets an other color than the text?
As far as I know it is not.Hi
Yes yes can change the color of the bullets and text.
<style>
ul {list-style-type :square ; }
li {color : blue ;}
li b {color : red ;}
</style>
</head>
<body>
<ul>
<li><b>1</b></li>
<li>2</li>
<li>3</li>
</ul>
</body>
</head>
I never said it was perfect, but it works. All you need to do
Is give the li text a attribute then call that in the style sheet.
cheers zaclane.put the background image on the LI and control it like so:
background: url(bullet.gif) 0px 0px no-repeat;
The second "0px" can be changed to move the bullet up or down in relation to text inside the LI. Put padding-left on the LI so text is pushed away from the bullet.
Your LI tags need a closing TAG </li>Zaclane, I'd do a similar thing, but I wouldn't use the <b> tag. Use a semantically meaningless tag such as a span tag. It's still a dirty way to do it, but at least <span> doesn't really mean anything.
Originally posted by TimeBandit
Your LI tags need a closing TAG </li> Only in XHTML.Originally posted by Paul Jr
It does for me.
Unless we are talking about different things, there is no need for a hack. Just set the padding: and margin: to 0.
Ok then explain to me why in my css I had to define to different nav margins for IE and FF in <!-- w --><a class="postlink" href="http://www.rgabbard.com/test.htmOriginally">www.rgabbard.com/test.htmOriginally</a><!-- w --> posted by lavalamp
Only in XHTML.
i dont believe so, from my understand you still should have the closing li tag w/ any html. The difference is that w/ html it doesnt really care about you not having it where xhtml it throws a flag. But i believe it is still correct to have it for html.I'm not sure why you needed different margins for different browsers, but give this a whirl:<style type="text/css"><!--
body{
margin:0;
padding:0;
background-color:#000;
color:#fff;
}
ul{
margin:0;
padding:0;
border:1px solid #fff;
list-style-type:none;
}
li{
margin:0;
padding:0;
border:1px solid #f00;
}
--></style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>Originally posted by pawky
i dont believe so, from my understand you still should have the closing li tag w/ any html. The difference is that w/ html it doesnt really care about you not having it where xhtml it throws a flag. But i believe it is still correct to have it for html. Nope. you don't have to close <li>'s in HTML, you don't even have to close <p>'s either.
Of course it's good practice to close all elements so that you don't run into difficulty later, but it's not required. In XHTML though, everything must be closed.
Don't believe me? Try validating this:Originally posted by lavalamp
Nope. you don't have to close <li>'s in HTML, you don't even have to close <p>'s either.
Of course it's good practice to close all elements so that you don't run into difficulty later, but it's not required. In XHTML though, everything must be closed.
Don't believe me? Try validating this:
wow, ok ;P i guess you are right thx, i still do anyways lol, guess im one step closer to xhtml then, eh? 
Well looking at your code you could convert over to XHTML without too much trouble at all. Could be a lot more accessible however... 
Originally posted by lavalamp
Well looking at your code you could convert over to XHTML without too much trouble at all. Could be a lot more accessible however...
ok, where would be the best place to read all i need to change to do xhtml? w3.org? thxWell to convert to XHTML 1.0, all you need to do is close ALL your elements (including <img /> and <meta />) and all elements and attributes should be in lower case.
However to convert to XHTML you need to send the browser the correct MIME type (application/xhtml+xml rather than just text/html). Unfortunately some browsers *cough*IE*cough* won't accept that MIME type. Therefore something called content negotiation is called for where you send application/xhtml+xml to standards browsers and text/html to everything else (all this requires server side code by the way).
I think that the first stepping stone would be to slap an XHTML 1.0 Strict DTD on your page and tweak it 'til it validates, then move on to XHTML 1.1.
Give this (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=33450&highlight=application%2Fxhtml%2A+MIME">http://www.webdeveloper.com/forum/showt ... ml%2A+MIME</a><!-- m -->) a read, should help you out.
Edit: This (<!-- m --><a class="postlink" href="http://www.autisticcuckoo.net/archive.php?id=2004/09/06/bad-xhtml">http://www.autisticcuckoo.net/archive.p ... /bad-xhtml</a><!-- m -->) is good too but it deals with even more advanced stuff (like converting the markup back to HTML for browsers that don't support application/xhtml+xml).Originally posted by lavalamp
Well to convert to XHTML 1.0, all you need to do is close ALL your elements (including <img /> and <meta />) and all elements and attributes should be in lower case.
ok, this part i knew, so that's good
However to convert to XHTML you need to send the browser the correct MIME type (application/xhtml+xml rather than just text/html). Unfortunately some browsers *cough*IE*cough* won't accept that MIME type. Therefore something called content negotiation is called for where you send application/xhtml+xml to standards browsers and text/html to everything else (all this requires server side code by the way).
I think that the first stepping stone would be to slap an XHTML 1.0 Strict DTD on your page and tweak it 'til it validates, then move on to XHTML 1.1.
Give this (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=33450&highlight=application%2Fxhtml%2A+MIME">http://www.webdeveloper.com/forum/showt ... ml%2A+MIME</a><!-- m -->) a read, should help you out.
Edit: This (<!-- m --><a class="postlink" href="http://www.autisticcuckoo.net/archive.php?id=2004/09/06/bad-xhtml">http://www.autisticcuckoo.net/archive.p ... /bad-xhtml</a><!-- m -->) is good too but it deals with even more advanced stuff (like converting the markup back to HTML for browsers that don't support application/xhtml+xml).
ok, ill have to look it over a couple times to make sure i understand ;P but first question would be, what is the purpose of MIME? and also, what does it stand for? ;P thxsoccer362001 wrote:
Ok then explain to me why in my css I had to define to different nav margins for IE and FF in
IE is in 'quirks mode'Waw alot has been going on here while I zzzZZZZzzz, do you guys ever sleep ?
I only used the <b> (I think it is still valid in html4) tag as a example.
I beleve If u can use XML then it is even simpler to create meaningless tags for this purpose.
<strong> is good to. Personaly the <span> tag is also a good all round tag.
And lets not forget to many pic's adds weight to you page.
Cheers zaclane.Originally posted by soccer362001
Ok then explain to me why in my css I had to define to different nav margins for IE and FF in <!-- w --><a class="postlink" href="http://www.rgabbard.com/test.htm">www.rgabbard.com/test.htm</a><!-- w -->
As Fang said, IE is in quirks mode from (I believe) the XML declaration at the top. Also, some browsers add default margin, some padding. It’s best to set both the padding and margin to 0.Originally posted by Paul Jr
As lavalamp said, IE is in quirks modeI did?
I think you mean Fang.Originally posted by lavalamp
I did?
I think you mean Fang.
lol, my bad.
Originally posted by pawky
ok, ill have to look it over a couple times to make sure i understand ;P but first question would be, what is the purpose of MIME? and also, what does it stand for? ;P thx
MIME stands for Multipurpose Internet Mail Extension. It is a standard system for identifying the type of data contained in a file based on its extension (so says Google).
Is it possible to make a list without using the tab?
I'm using this now (Adobe GoLive 5):
<ul>
<li>Option A
<li>Option B
<li>Option C
</ul>
Thnx,
LeonIE automaticaly blockquotes(tabs) the UL, whereas FireFox does not. The only way I know to get around it is to use a CSS hack and apply a negative margin-left.Thnx, i'll give that a try....
And is it possible to use instead of the bullet a '>'. I don't want to use an image for this.It seems to me that you can't use a '>' for a list unless it is an image (I could be wrong, but...).
If you want to get rid of the disc, you can use this :
<style type="text/css">li {list-style: none;}</style>
List-style properties are here. (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/generate.html#lists">http://www.w3.org/TR/REC-CSS2/generate.html#lists</a><!-- m -->)Hmm, thnx..
But if I use an image it looks different in every browser.
- PC explorer, image too close at the text
- MAC Safari, image looks fine
- Mac Explorer, image too high
- MAC Firefox, image too low
- PC Netscape, image too low
Is there a solution to get the same result in all the browsers?Probably not because different browsers render CSS in different ways.<ul style="list-style:none;">
<li>> Option A
<li>> Option B
<li>> Option C
</ul>
or have an image as background to liOriginally posted by soccer362001
IE automaticaly blockquotes(tabs) the UL, whereas FireFox does not.
It does for me.
Originally posted by soccer362001
The only way I know to get around it is to use a CSS hack and apply a negative margin-left.
Unless we are talking about different things, there is no need for a hack. Just set the padding: and margin: to 0.Well, I've choosen for the square bullets... That works in all the browsers correct.
But is it possible to give the bullets an other color than the text?Originally posted by maw_webdesign
Well, I've choosen for the square bullets... That works in all the browsers correct.
Yes.
Originally posted by maw_webdesign
But is it possible to give the bullets an other color than the text?
As far as I know it is not.Hi
Yes yes can change the color of the bullets and text.
<style>
ul {list-style-type :square ; }
li {color : blue ;}
li b {color : red ;}
</style>
</head>
<body>
<ul>
<li><b>1</b></li>
<li>2</li>
<li>3</li>
</ul>
</body>
</head>
I never said it was perfect, but it works. All you need to do
Is give the li text a attribute then call that in the style sheet.
cheers zaclane.
put the background image on the LI and control it like so:background: url(bullet.gif) 0px 0px no-repeat;
The second "0px" can be changed to move the bullet up or down in relation to text inside the LI. Put padding-left on the LI so text is pushed away from the bullet.
Your LI tags need a closing TAG </li>Zaclane, I'd do a similar thing, but I wouldn't use the <b> tag. Use a semantically meaningless tag such as a span tag. It's still a dirty way to do it, but at least <span> doesn't really mean anything.
Originally posted by TimeBandit
Your LI tags need a closing TAG </li> Only in XHTML.Originally posted by Paul Jr
It does for me.
Unless we are talking about different things, there is no need for a hack. Just set the padding: and margin: to 0.
Ok then explain to me why in my css I had to define to different nav margins for IE and FF in <!-- w --><a class="postlink" href="http://www.rgabbard.com/test.htmOriginally">www.rgabbard.com/test.htmOriginally</a><!-- w --> posted by lavalamp
Only in XHTML.
i dont believe so, from my understand you still should have the closing li tag w/ any html. The difference is that w/ html it doesnt really care about you not having it where xhtml it throws a flag. But i believe it is still correct to have it for html.I'm not sure why you needed different margins for different browsers, but give this a whirl:<style type="text/css"><!--
body{
margin:0;
padding:0;
background-color:#000;
color:#fff;
}
ul{
margin:0;
padding:0;
border:1px solid #fff;
list-style-type:none;
}
li{
margin:0;
padding:0;
border:1px solid #f00;
}
--></style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>Originally posted by pawky
i dont believe so, from my understand you still should have the closing li tag w/ any html. The difference is that w/ html it doesnt really care about you not having it where xhtml it throws a flag. But i believe it is still correct to have it for html. Nope. you don't have to close <li>'s in HTML, you don't even have to close <p>'s either.
Of course it's good practice to close all elements so that you don't run into difficulty later, but it's not required. In XHTML though, everything must be closed.
Don't believe me? Try validating this:Originally posted by lavalamp
Nope. you don't have to close <li>'s in HTML, you don't even have to close <p>'s either.
Of course it's good practice to close all elements so that you don't run into difficulty later, but it's not required. In XHTML though, everything must be closed.
Don't believe me? Try validating this:
wow, ok ;P i guess you are right
thx, i still do anyways lol, guess im one step closer to xhtml then, eh? Well looking at your code you could convert over to XHTML without too much trouble at all. Could be a lot more accessible however... Originally posted by lavalamp Well looking at your code you could convert over to XHTML without too much trouble at all. Could be a lot more accessible however...
ok, where would be the best place to read all i need to change to do xhtml? w3.org? thx
Well to convert to XHTML 1.0, all you need to do is close ALL your elements (including <img /> and <meta />) and all elements and attributes should be in lower case.However to convert to XHTML you need to send the browser the correct MIME type (application/xhtml+xml rather than just text/html). Unfortunately some browsers *cough*IE*cough* won't accept that MIME type. Therefore something called content negotiation is called for where you send application/xhtml+xml to standards browsers and text/html to everything else (all this requires server side code by the way).
I think that the first stepping stone would be to slap an XHTML 1.0 Strict DTD on your page and tweak it 'til it validates, then move on to XHTML 1.1.
Give this (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=33450&highlight=application%2Fxhtml%2A+MIME">http://www.webdeveloper.com/forum/showt ... ml%2A+MIME</a><!-- m -->) a read, should help you out.
Edit: This (<!-- m --><a class="postlink" href="http://www.autisticcuckoo.net/archive.php?id=2004/09/06/bad-xhtml">http://www.autisticcuckoo.net/archive.p ... /bad-xhtml</a><!-- m -->) is good too but it deals with even more advanced stuff (like converting the markup back to HTML for browsers that don't support application/xhtml+xml).Originally posted by lavalamp
Well to convert to XHTML 1.0, all you need to do is close ALL your elements (including <img /> and <meta />) and all elements and attributes should be in lower case.
ok, this part i knew, so that's good
However to convert to XHTML you need to send the browser the correct MIME type (application/xhtml+xml rather than just text/html). Unfortunately some browsers *cough*IE*cough* won't accept that MIME type. Therefore something called content negotiation is called for where you send application/xhtml+xml to standards browsers and text/html to everything else (all this requires server side code by the way).
I think that the first stepping stone would be to slap an XHTML 1.0 Strict DTD on your page and tweak it 'til it validates, then move on to XHTML 1.1.
Give this (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=33450&highlight=application%2Fxhtml%2A+MIME">http://www.webdeveloper.com/forum/showt ... ml%2A+MIME</a><!-- m -->) a read, should help you out.
Edit: This (<!-- m --><a class="postlink" href="http://www.autisticcuckoo.net/archive.php?id=2004/09/06/bad-xhtml">http://www.autisticcuckoo.net/archive.p ... /bad-xhtml</a><!-- m -->) is good too but it deals with even more advanced stuff (like converting the markup back to HTML for browsers that don't support application/xhtml+xml).
ok, ill have to look it over a couple times to make sure i understand ;P but first question would be, what is the purpose of MIME? and also, what does it stand for? ;P thxsoccer362001 wrote:
Ok then explain to me why in my css I had to define to different nav margins for IE and FF in
IE is in 'quirks mode'Waw alot has been going on here while I zzzZZZZzzz, do you guys ever sleep ?
I only used the <b> (I think it is still valid in html4) tag as a example.
I beleve If u can use XML then it is even simpler to create meaningless tags for this purpose.
<strong> is good to. Personaly the <span> tag is also a good all round tag.
And lets not forget to many pic's adds weight to you page.
Cheers zaclane.Originally posted by soccer362001
Ok then explain to me why in my css I had to define to different nav margins for IE and FF in <!-- w --><a class="postlink" href="http://www.rgabbard.com/test.htm">www.rgabbard.com/test.htm</a><!-- w -->
As Fang said, IE is in quirks mode from (I believe) the XML declaration at the top. Also, some browsers add default margin, some padding. It’s best to set both the padding and margin to 0.Originally posted by Paul Jr
As lavalamp said, IE is in quirks modeI did?
I think you mean Fang.
Originally posted by lavalamp I did?
I think you mean Fang.
lol, my bad.
Originally posted by pawky
ok, ill have to look it over a couple times to make sure i understand ;P but first question would be, what is the purpose of MIME? and also, what does it stand for? ;P thx
MIME stands for Multipurpose Internet Mail Extension. It is a standard system for identifying the type of data contained in a file based on its extension (so says Google
).