Stupid CSS Bugs

[Doug E]

Ive had a problem with Firefox placing a blank space underneath images in some of my sites. Some its no problem and Im not bright enough to figure out the difference.

With this site http://www.porncritixxx.com/porncritixxxx-test.html

the second header you can see with FF shows a blank space under each image. In IE it is fine.

My doc type as you can see is declared as..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



I'm also having what must be a related problem on this site..

http://www.thaivixen.com/modelsfromthailand.html

The hardlinks on the left are all unintentionally double spaced, even between the same links and line of text. I gave up long ago playing with it but decided to use this design for some new sites and am having the same problem so I'd better address it.


If anybody can show me my errors I'll love you long time :)

[Preacher]

Wow, at first blush I don't know what is specifically wrong, and not to sound like an elitist, but you really should start trying to use div's in your css as it would make things much clearer.

My guess however is that it has to do with the way firefox is handling your wrapping of a table within a table. When I extract the table so that it is no longer nested and view it in Firefox with no css stylings inheirited or otherwise it looks just fine.

<table class="header-table" cellspacing="0" cellpadding="0">
<tr>
<td>

<!-- what is the purpose of the above table? -->

<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="http://www.porncritixxx.com/headers/asianreviews/header_01.jpg" width="736" height="22"></td>
</tr>
<tr>

<td><table width="736" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="#"><img src="http://www.porncritixxx.com/headers/asianreviews/header_02.jpg" width="114" height="90" border="0"></a></td>
<td><a href="#"><img src="http://www.porncritixxx.com/headers/asianreviews/header_03.jpg" width="523" height="90" border="0"></a></td>
<td><img border="0" src="http://www.porncritixxx.com/headers/asianreviews/header_04.jpg" width="99" height="90"></td>
</tr>
</table></td>
</tr>
<tr>

<td><img src="http://www.porncritixxx.com/headers/asianreviews/header_05.jpg" width="736" height="84"></td>
</tr>
<tr>
<td><table width="736" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="http://www.porncritixxx.com/headers/asianreviews/header_06.jpg" width="425" height="23"></td>
<td><a href="#"><img src="http://www.porncritixxx.com/headers/asianreviews/header_07.gif" width="212" height="23" border="0"></a></td>
<td><img src="http://www.porncritixxx.com/headers/asianreviews/header_08.jpg" width="99" height="23"></td>
</tr>

</table></td>
</tr>
<tr>
<td><img src="http://www.porncritixxx.com/headers/asianreviews/header_09.jpg" width="736" height="59"></td>
</tr>
<tr>
<td><img src="http://www.porncritixxx.com/headers/asianreviews/header_10.jpg" width="736" height="72"></td>
</tr>
</table>

<!-- remove the following lines -->

</td>
</tr>
</table>

[Preacher]

I take that back, it has to do with your doc type, try
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

But still, if your styling with css it's in your best interest to get used to divs. :)

[Useless]

On the second one, change:
.left-links { width: 105px; background-color: #7E3517; text-align: left; padding: 1px 1px 1px 2px; }
to:
.left-links { line-height: .9; width: 105px; background-color: #7E3517; text-align: left; padding: 1px 1px 1px 2px; }
Note that all I did was add line-height: .9;

Fucking Preacher beat me to the DOCTYPE change on the first one. Fucker!

[Licker4U]

Couldn't find the thread I had about CSS so I'll jump on this one. I'm using:

table { background-color:#ffffff; }
td { background-color: #e00000; }

to set some colors on a page but it affects my recip links. What can I do so the recip table links are not affected?

Also, in the following, what is the "th"?

body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #e2e2e2;
}

[Licker4U]

Is there some way to use "div" to exclude the recip table from the CSS properties?

[Useless]

Is there some way to use "div" to exclude the recip table from the CSS properties?No, not if the recips are constructed of tables and tds without their own specific class set. Preacher is the expert - I'm just a hack, but since I'm awake and he's busy enjoying the wonderful California sunrise, I'd suggest that you not apply styles generically to tables and tds on your warning page.

th = table header. If you were building a table that was meant to be a chart of some sort, where the first row is comprised of "headings" or "titles" for the information which will follow below it, you'd use th instead of td in your first row.

<table>
<tr><th>Cumsluts</th><th>Filthy Whores</th></tr>
<tr><td>Britney Spears</td><td>Paris Hilton</td></tr>
<tr><td>Angelina Jolie</td><td>Pamela Anderson</td></tr>
</table>

[Licker4U]

I'd suggest that you not apply styles generically to tables and tds on your warning page.

Well fuck me, I'll never smile again |sad|

th = table header. If you were building a table that was meant to be a chart of some sort, where the first row is comprised of "headings" or "titles" for the information which will follow below it, you'd use th instead of td in your first row.

Whew! Thanks! I've seen that in a few places and never put it together.

While I have your attention and everyone else is waking up, on this page:

http://www.best-wet-pussy.com/hairy-pussy/

there is a yellow line under the image on the right, in Firefox, but not in IE. How can I get rid of the yellow bar?

I also just noticed the SmutGremlins recip is all fucked up in Firefox...|confused|

[Useless]

Licker, change your Doctype to <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> to resolve both of those issues. (Kill that 'loose' part.)

[Licker4U]

Licker, change your Doctype to <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> to resolve both of those issues. (Kill that 'loose' part.)

Well I'll be damned. That fixed it. Who says your useless? I guess I can smile again :D

Now, how can I get the text in my recip table off that nasty blue default color?

[Useless]

Now, how can I get the text in my recip table off that nasty blue default color?For that, I would simply add

a:link, a:active, a:visited, a:hover{
font-size: 14px;
color: #feff01;
font-family: Arial;
text-decoration: underline;
font-weight: bold
}
to your style sheet. That will take care of any link on that page which doesn't have its own specified class.

Where do I send the bill? ;)

[Licker4U]

For that, I would simply add

a:link, a:active, a:visited, a:hover{
font-size: 14px;
color: #feff01;
font-family: Arial;
text-decoration: underline;
font-weight: bold
}
to your style sheet. That will take care of any link on that page which doesn't have its own specified class.

Where do I send the bill? ;)

|bananna| |bananna| |bananna|
Happy happy joy joy!
|bow|
That worked!

Bill? Hell, I'll take ya in and feed ya!

But damn the pages in that site sure have a lot of code in them. Is that the way I'm gonna have to build sites now? I'ld rather go back to straight html...

[Useless]

But damn the pages in that site sure have a lot of code in them. Is that the way I'm gonna have to build sites now? I'ld rather go back to straight html...Well you can drastically reduce the amount of code in the <head> by saving your CSS info onto it's own page, then referencing it in the <head> with something like this:
<link rel="stylesheet" type="text/css" href="lickers.css" />
So, in your free sites folder, you'd have five pages instead of four.
index.html
main.html
gallery1.html
gallery2.html
lickers.css

That way, you only have to alter the styles once to make site-wide changes. It makes it far simpler when you find yourself adding more and more styles.

[Licker4U]

Well you can drastically reduce the amount of code in the <head> by saving your CSS info onto it's own page, then referencing it in the <head> with something like this:
<link rel="stylesheet" type="text/css" href="lickers.css" />
So, in your free sites folder, you'd have five pages instead of four.
index.html
main.html
gallery1.html
gallery2.html
lickers.css

That way, you only have to alter the styles once to make site-wide changes. It makes it far simpler when you find yourself adding more and more styles.


So, I put the style sheet in Notepad and save it as lickers.css and upload it as that? And for the mirrors I can use ../(originalsite) to call the style sheet?

[Useless]

The answer is YES. ;) You don't have to call it licker.css. Mine is named cunt.css. Don't believe me? View my source! Anita's Dirty Pillows (http://www.filthyearl.com/big-tits/anitas-dirty-pillows/index.html) :D

[Maj. Stress]

Well you can drastically reduce the amount of code in the <head> by saving your CSS info onto it's own page, then referencing it in the <head> with something like this:
<link rel="stylesheet" type="text/css" href="lickers.css" />
So, in your free sites folder, you'd have five pages instead of four.
index.html
main.html
gallery1.html
gallery2.html
lickers.css

That way, you only have to alter the styles once to make site-wide changes. It makes it far simpler when you find yourself adding more and more styles.

The other benefit of using an external style sheet is page load times. :)

[Doug E]

I take that back, it has to do with your doc type, try
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

But still, if your styling with css it's in your best interest to get used to divs.

I absolutely agree with you on divs, but i have a problem where ai always try to kick it old school and thought id be the only guy around to still use tables ;) But as soon as divs become a thing of the past ile be all over them (or i just stop being lazy)

On the second one, change:
.left-links { width: 105px; background-color: #7E3517; text-align: left; padding: 1px 1px 1px 2px; }
to:
.left-links { line-height: .9; width: 105px; background-color: #7E3517; text-align: left; padding: 1px 1px 1px 2px; }
Note that all I did was add line-height: .9;

Fucking Preacher beat me to the DOCTYPE change on the first one. Fucker!

U dub, I owe for that line height bit man. I was using some other line collapse tag that never worked for me, i didn't even know this one existed. I applied the same thing ( line-height: .0; ) to the table containing my header on the porncritixxx page and it worked like a frickin charm.

http://www.porncritixxx.com/asianreviews.html

Thanks to you both for your replies. Next time ile ask here first before pulling whats left of my hair out and putting projects off for months over one little bug :D

[Licker4U]

The answer is YES. ;) You don't have to call it licker.css. Mine is named cunt.css. Don't believe me? View my source! Anita's Dirty Pillows (http://www.filthyearl.com/big-tits/anitas-dirty-pillows/index.html) :D

Kewl Useful! |cool| Thanks! If you're ever in south Alabama I'll take ya to the Redneck Riviera. (Gulf Shores/Orange Beach area) Maybe hit the Pink Pony Pub and Flora/Bama. |cheers|

[Licker4U]

Well damn, I knew it wouldn't last. On this page:

http://www.best-wet-pussy.com/hairy-pussy/gallery-1.html

it looks fine in IE but in Firefox there is a short blue line above the word "Here" just under the banner on the right. Wazat?|confused|

[Useless]

Don't fear the code! Make the code fear you!

Anyway, browsers are sensitive about what follows an image - any image.

Change:
<img src="gallery-1_files/banner4.jpg" border="0" height="160" width="200">
<br>
to:
<img src="gallery-1_files/banner4.jpg" border="0" height="160" width="200"><br>

The carriage return after the image and before the <br /> is placing space in between the two.

[Licker4U]

Don't fear the code! Make the code fear you!

Anyway, browsers are sensitive about what follows an image - any image.

Change:
<img src="gallery-1_files/banner4.jpg" border="0" height="160" width="200">
<br>
to:
<img src="gallery-1_files/banner4.jpg" border="0" height="160" width="200"><br>

The carriage return after the image and before the <br /> is placing space in between the two.

Aw damn. That was too simple. How am I gonna learn all this crap?

Thanks!

Oh, and what's the difference between <br> and <br />?

[Useless]

Oh, and what's the difference between <br> and <br />?My HTML validator tells me to change my <br> to <br />. That's all I know. ;) It also tells me to end my <img> with />, so I do that now too.
<img src="slag.jpg" />

[Simon]

If you're using a DOCTYPE that says "XHTML" in it, your validators will tell you that you should close certain html tags. From an explantion on the DigitalPoint forums...

XHTML is html reformulated as xml. XML requires that all tags be closed. Some tags in html are empty, that is they are replaced by whatever they're tagging. For example the <img> is replaced by the actual image, <br> is replaced by a line-feed, and <hr> is replaced by a horizontal line. These tags have no closing tag in html.

XML allows a short-hand for empty elements, the /> mechanism; thus, <br/>. That's good for xhtml, but invalid for html. HTML does allow it, though, if there is a space before the virgule, /. So <br /> fulfills the xml requirement, while being html valid. Using something like <br></br> would be invalid, as the closing tag is prohibited, and <br><br /> is redundant in html and invalid in xhtml.

Also, XHTML is based on XML, so it's much stricter about some other things, like:

- all elements and attribute names must appear in lower case
- all attribute values must be quoted
- non-Empty Elements require a closing tag
- empty elements are terminated using a space and a trailing slash
- no attribute minimization is allowed
- in strict XHTML, all inline elements must be contained in a block element


Personally, I prefer to use HTML 4.01 Strict since the real advantages of XHTML are only available if you serve the pages as ‘application/xhtml+XML’ . If you serve the pages as text/html (which almost everyone does), you may as well be coding in HTML. Documents served as 'text/html' will not be processed as XML, which means that web browsers will not render your pages as XHTML, but rather as HTML and will fall back on error handling and trying to guess how it was meant to be anyway.

Plus, if you do try to serve your pages as ‘application/xhtml+XML’ then Google AdSense and some scripting will not work. For example, document.write, innerHTML (for AJAX), and others.

More on why not to use XHTML here (http://www.google.com/search?q=why+not+use+xhtml).

I'm sure there are some good reasons why some folks do like to use XHTML and I'll be glad to read about some of those if anyone would like to post about them here.

[Licker4U]

If you're using a DOCTYPE that says "XHTML" in it, your validators will tell you that you should close certain html tags. From an explantion on the DigitalPoint forums...

XHTML is html reformulated as xml. XML requires that all tags be closed. Some tags in html are empty, that is they are replaced by whatever they're tagging. For example the <img> is replaced by the actual image, <br> is replaced by a line-feed, and <hr> is replaced by a horizontal line. These tags have no closing tag in html.

XML allows a short-hand for empty elements, the /> mechanism; thus, <br/>. That's good for xhtml, but invalid for html. HTML does allow it, though, if there is a space before the virgule, /. So <br /> fulfills the xml requirement, while being html valid. Using something like <br></br> would be invalid, as the closing tag is prohibited, and <br><br /> is redundant in html and invalid in xhtml.

Also, XHTML is based on XML, so it's much stricter about some other things, like:

- all elements and attribute names must appear in lower case
- all attribute values must be quoted
- non-Empty Elements require a closing tag
- empty elements are terminated using a space and a trailing slash
- no attribute minimization is allowed
- in strict XHTML, all inline elements must be contained in a block element


Personally, I prefer to use HTML 4.01 Strict since the real advantages of XHTML are only available if you serve the pages as ‘application/xhtml+XML’ . If you serve the pages as text/html (which almost everyone does), you may as well be coding in HTML. Documents served as 'text/html' will not be processed as XML, which means that web browsers will not render your pages as XHTML, but rather as HTML and will fall back on error handling and trying to guess how it was meant to be anyway.

Plus, if you do try to serve your pages as ‘application/xhtml+XML’ then Google AdSense and some scripting will not work. For example, document.write, innerHTML (for AJAX), and others.

More on why not to use XHTML here (http://www.google.com/search?q=why+not+use+xhtml).

I'm sure there are some good reasons why some folks do like to use XHTML and I'll be glad to read about some of those if anyone would like to post about them here.

Well, that explained that |loony| |confused| I'll take your word for it.

Another CSS question: If I use CSS to set a border around an image of say, 2px, do I still need to put border="0" in the line where I set the image width, height, etc? Seems pointless but I saw it done that way on someone's site.

[Doug E]

Another CSS question: If I use CSS to set a border around an image of say, 2px, do I still need to put border="0" in the line where I set the image width, height, etc? Seems pointless but I saw it done that way on someone's site.

No, css already defines the border so theres no need for the border tag.

You'll find every html tag or property or whatever can be replaced with css and theres much more you can do with css so its worth learning which ones replace which.

For me it was hard to get used to dropping cellspacing and padding and replacing it with css padding and margins. Took a bit to wrap my mind around it. But once I got onto it its been sweet.

And I highly recommend HTML 4.01 Strict over Transitional as with strict your pages will look exactly the same in both FF and IE with one or two minor tweaks declared for the body and or all tables and td's of the page including...

text-align: center;
margin: 0px;
border-collapse: collapse;
vertical-align: top;

and i think...

line-height: 0px;

...but im just learning to play with that one.

[Licker4U]

No, css already defines the border so theres no need for the border tag.

Thanks!


For me it was hard to get used to dropping cellspacing and padding and replacing it with css padding and margins. Took a bit to wrap my mind around it. But once I got onto it its been sweet.

Now that sounds nice.

[Licker4U]

Well, I never thought it would be possible but I'm building sites with external style sheets faster than the old way. Here I sit with a site ready to submit, waiting for the 24 hour clock to tick down so I can get it submitted. This is nice but now I have to find something to occupy my time...|zzzzzzzzz

[Maj. Stress]

This is nice but now I have to find something to occupy my time...|zzzzzzzzz
Get crackin on your next site. :) I've found with the limited css I use it is a plus all the way. I learn a little more as a I go. |headbang|

[Licker4U]

AAAAARRRRGGGHHHH!! |banghead| |pcsucks| |shocking|

OK, now that I've pulled out ALL my hair and used up my LAST nerve, why would a page look fine in Firefox but have trouble in IE?? I've gone over the CSS line by line and it looks fine. |shocking| I thought Firefox was more critical of errors.

[Licker4U]

Nevermind...A complete and total reboot fixed things. Go figure...|pcsucks|

[Doug E]

Ive found IE to be more critical of errors. But you'll get far less if you go with html strict, but im sounding like a broken record now :)

[Licker4U]

If I have a background saved as bg.gif, shouldn't this set it as the body background on a page?

body {background-image: url(bg.gif);}

[Maj. Stress]

Licker,
That looks like the right syntax. Did you tell it to repeat?
background-repeat: repeat;

http://www.w3schools.com/css/pr_background-repeat.asp

[Licker4U]

Licker,
That looks like the right syntax. Did you tell it to repeat?
background-repeat: repeat;

I didn't but just did and still nothing...|huh

Here's the page: http://www.best-wet-pussy.com/lesbian-sweethearts

Ahhhh, wait a minute, lemme delete history, cache, etc. That might be the problem

[Maj. Stress]

body
body {background-image: url(bg.gif);
background-repeat: repeat}

Take the first "body" out and put a ; after repeat and see what happens

[Licker4U]

body
body {background-image: url(bg.gif);
background-repeat: repeat}

Take the first "body" out and put a ; after repeat and see what happens

Well duuuuh, that extra "body" was the culprit. |pokefun| me
(I wish there was a CSS validator)

I thought the ";" was if you were going to add more things to the list of attributes. I put it in and left it out and it didn't affect anything.

Well, that fixed it in Firefox but it's not appearing in IE.

[Maj. Stress]

I sent you a copy I made of the page and css that works. Check your mail at aol.

[Licker4U]

Thanks, I'll take a look

[Licker4U]

I deleted temporary internet files and deleted history which didn't work. I deleted cookies and that fixed the problem. That and getting rid of the extra "body".

Thanks!

[Simon]

(I wish there was a CSS validator)

Try this one...
http://jigsaw.w3.org/css-validator/

Also, if you're making changes to an external css file and not seeing the changes in your html page (especially in IE), one thing that often "refreshes" everything is to load your external css file in your browser and then load your html page in the same window. It's harder for IE (and other browsers) to act like they don't know about your changes after you've just rubbed their faces in it.

[oast]

Try this one...
http://jigsaw.w3.org/css-validator/

Also, if you're making changes to an external css file and not seeing the changes in your html page (especially in IE), one thing that often "refreshes" everything is to load your external css file in your browser and then load your html page in the same window. It's harder for IE (and other browsers) to act like they don't know about your changes after you've just rubbed their faces in it.A refresh using Ctrl+F5 will force the browser to download all fresh content from the server.

[Licker4U]

Try this one...
http://jigsaw.w3.org/css-validator/

Also, if you're making changes to an external css file and not seeing the changes in your html page (especially in IE), one thing that often "refreshes" everything is to load your external css file in your browser and then load your html page in the same window. It's harder for IE (and other browsers) to act like they don't know about your changes after you've just rubbed their faces in it.

A refresh using Ctrl+F5 will force the browser to download all fresh content from the server.

Thanks, I'll try both

[Licker4U]

When using this for a dotted border:

p.dotted {border-style: dotted;
border-color: #0000ff}

is there any way to adjust the size of the dots? All I've found is thick, medium and thin.... |huh

I found it. This works:

border-width: 2px

[HC-Majick]

edit...nevermind, seems to be some bugs.

[Licker4U]

Are there any neat things that can be done to text with CSS like shadow, glow, etc?

[Simon]

If you're willing to have (most?) effects only work in Internet Explorer and only on the Windows platform, then these links may help.

www.w3.org/TR/REC-CSS2/text.html
http://tutorials.alsacreations.com/ombre/
www.webthang.co.uk/Tuts/tuts_css/css4/css4.asp

More at www.google.com/search?q=css+text+effects

Filter generator
http://rainbow.arch.scriptmania.com/css/ie_filters_generator.html

Make sure to look at these effects in Firefox since many reviewers prefer using that browser. You need to be sure things will degrade in ways that won't hurt you.

[Licker4U]

Thanks Simon, one of those was exactly what I wanted |bow| |bananna| |headbang| |thumb

[Licker4U]

I'm using this for a text link but the font is showing up bold. How can I get the font to be normal, not bold?

a.two:link {
color: #ff0000;
font-family: Arial;
font-size: 22px;
text-decoration: underline;
font-style: italic;
}

a.two:active {
color: #ff0000;
font-family: Arial;
font-size: 22px;
text-decoration: underline;
font-style: italic;
}
a.two:visited {
color: #ff0000;
font-family: Arial;
font-size: 22px;
text-decoration: underline;
font-style: italic;
}
a.two:hover {
color: #ff0000;
font-family: Arial;
font-size: 22px;
text-decoration: underline;
font-style: italic;}

[Preacher]

font-weight: normal

[Licker4U]

font-weight: normal

Well damn, that was too easy.

Thanks! |thumb