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|

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

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.

Licker4U · 2007-01-22, 12:53 PM

Quote:

Originally Posted by Doug E

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

Thanks!

Quote:

Originally Posted by Doug E

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 · 2007-01-22, 09:57 PM

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...

Maj. Stress · 2007-01-22, 10:57 PM

Quote:

Originally Posted by Licker4U

This is nice but now I have to find something to occupy my time...

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.

Licker4U · 2007-01-23, 02:32 PM

AAAAARRRRGGGHHHH!!

|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 · 2007-01-23, 03:51 PM

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

Doug E · 2007-01-24, 02:27 PM

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 · 2007-01-28, 12:18 PM

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

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 · 2007-01-28, 01:25 PM

Quote:

Originally Posted by Maj. Stress

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...

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 · 2007-01-28, 01:36 PM

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 · 2007-01-28, 01:46 PM

Quote:

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

Well duuuuh, that extra "body" was the culprit.

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.

Simon · 2007-01-28, 02:38 PM

Quote:

Originally Posted by Licker4U

(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 · 2007-01-29, 05:58 AM

Quote:

Originally Posted by Simon

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.

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-22, 07:03 AM	#10
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

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-22, 09:57 PM	#14
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, 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...

2007-01-23, 02:32 PM	#16
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	AAAAARRRRGGGHHHH!! \|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.

2007-01-23, 03:51 PM	#17
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	Nevermind...A complete and total reboot fixed things. Go figure...

2007-01-24, 02:27 PM	#18
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	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 __________________ Asian Porn \| Sora Aoi \| Natt Kesarin

2007-01-28, 12:18 PM	#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	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);}

2007-01-28, 01:11 PM	#20
Maj. Stress Progress rarely comes in buckets, it normally comes in teaspoons Join Date: Jun 2005 Location: Dark Side Of Naboo Posts: 1,289	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

2007-01-28, 01:36 PM	#22
Maj. Stress Progress rarely comes in buckets, it normally comes in teaspoons Join Date: Jun 2005 Location: Dark Side Of Naboo Posts: 1,289	body body {background-image: url(bg.gif); background-repeat: repeat} Take the first "body" out and put a ; after repeat and see what happens