Stupid CSS Bugs

Doug E · 2007-01-19, 07:16 PM

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 · 2007-01-19, 08:42 PM

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.

HTML Code:

<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 · 2007-01-19, 08:47 PM

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 · 2007-01-19, 08:54 PM

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 · 2007-01-20, 09:07 AM

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 · 2007-01-20, 09:43 AM

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

Useless · 2007-01-20, 09:58 AM

Quote:

Originally Posted by Licker4U

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.

HTML Code:

<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 · 2007-01-20, 10:50 AM

Quote:

Originally Posted by Useless Warrior

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

Quote:

Originally Posted by Useless Warrior

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 · 2007-01-20, 11:46 AM

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 · 2007-01-20, 11:50 AM

Quote:

Originally Posted by Useless Warrior

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

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

Useless · 2007-01-20, 12:27 PM

Quote:

Originally Posted by Licker4U

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 · 2007-01-20, 12:49 PM

Quote:

Originally Posted by Useless Warrior

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?

Happy happy joy joy!

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 · 2007-01-20, 03:18 PM

Quote:

Originally Posted by Licker4U

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 · 2007-01-20, 05:27 PM

Quote:

Originally Posted by Useless Warrior

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 · 2007-01-20, 08:30 PM

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

Maj. Stress · 2007-01-20, 10:00 PM

Quote:

Originally Posted by Useless Warrior

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 · 2007-01-20, 11:09 PM

Quote:

Originally Posted by 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.

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)

Quote:

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

Licker4U · 2007-01-21, 09:38 AM

Quote:

Originally Posted by Useless Warrior

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

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.

Licker4U · 2007-01-21, 10:17 AM

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

http://www.best-wet-pussy.com/hairy-...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 · 2007-01-21, 12:23 PM

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

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

Change:

HTML Code:

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

to:

HTML Code:

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

The carriage return after the image and before the is placing space in between the two.

Licker4U · 2007-01-21, 01:22 PM

Quote:

Originally Posted by Useless Warrior

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

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

Change:

HTML Code:

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

to:

HTML Code:

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

The carriage return after the image and before the 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 and ?

Useless · 2007-01-21, 08:15 PM

Quote:

Originally Posted by Licker4U

Oh, and what's the difference between and ?

My HTML validator tells me to change my to . 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 · 2007-01-22, 07:03 AM

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, 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, . That's good for xhtml, but invalid for html. HTML does allow it, though, if there is a space before the virgule, /. So fulfills the xml requirement, while being html valid. Using something like would be invalid, as the closing tag is prohibited, and 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.

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 · 2007-01-22, 10:32 AM

Quote:

Originally Posted by 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, 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, . That's good for xhtml, but invalid for html. HTML does allow it, though, if there is a space before the virgule, /. So fulfills the xml requirement, while being html valid. Using something like would be invalid, as the closing tag is prohibited, and 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.

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

|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 · 2007-01-22, 12:35 PM

Quote:

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.

2007-01-19, 07:16 PM	#1
Doug E Kids are great, Appu. You can teach them to hate the things you hate and they practically raise themselves now-a-days, you know, with the internet and all Join Date: Mar 2005 Location: Canadeh Posts: 197	Stupid CSS Bugs 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 __________________ Asian Porn \| Sora Aoi \| Natt Kesarin

2007-01-19, 08:47 PM	#3
Preacher There's Xanax in my thurible! Join Date: Apr 2005 Location: Wherever they screw on my head Posts: 2,441	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. __________________ NSCash * This Depraved World

2007-01-19, 08:54 PM	#4
Useless Certified Nice Person Join Date: Oct 2003 Location: Dirty Undies, NY Posts: 11,268	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! __________________ Click here to purchase a bridge I'm selling.

2007-01-20, 09:07 AM	#5
Licker4U Mean people suck, nice people swallow, are you mean or nice? Join Date: Sep 2003 Location: Lower Alabama-The Redneck Riviera Posts: 2,377	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; } Last edited by Licker4U; 2007-01-20 at 09:27 AM..

2007-01-20, 11:46 AM	#9
Useless Certified Nice Person Join Date: Oct 2003 Location: Dirty Undies, NY Posts: 11,268	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.) __________________ Click here to purchase a bridge I'm selling.

2007-01-20, 09:43 AM	#6
Licker4U Mean people suck, nice people swallow, are you mean or nice? Join Date: Sep 2003 Location: Lower Alabama-The Redneck Riviera Posts: 2,377	Is there some way to use "div" to exclude the recip table from the CSS properties?

2007-01-20, 08:30 PM	#15
Useless Certified Nice Person Join Date: Oct 2003 Location: Dirty Undies, NY Posts: 11,268	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 __________________ Click here to purchase a bridge I'm selling. Last edited by Useless; 2007-01-20 at 08:32 PM..

2007-01-21, 10:17 AM	#19
Licker4U Mean people suck, nice people swallow, are you mean or nice? Join Date: Sep 2003 Location: Lower Alabama-The Redneck Riviera Posts: 2,377	Well damn, I knew it wouldn't last. On this page: http://www.best-wet-pussy.com/hairy-...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\|

2007-01-21, 12:23 PM	#20
Useless Certified Nice Person Join Date: Oct 2003 Location: Dirty Undies, NY Posts: 11,268	Don't fear the code! Make the code fear you! Anyway, browsers are sensitive about what follows an image - any image. Change: HTML Code: <img src="gallery-1_files/banner4.jpg" border="0" height="160" width="200"> <br> to: HTML Code: <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. __________________ Click here to purchase a bridge I'm selling.

2007-01-22, 07:03 AM	#23
Simon That which does not kill us, will try, try again. Join Date: Aug 2003 Location: Conch Republic Posts: 5,150	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. 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. __________________ "If you're happy and you know it, think again." -- Guru Pitka