| Web Design Lobby Forum for general web design issues not specific to scripting or graphics. |
10-19-2004, 05:18 AM
|
#1 (permalink)
|
|
Inactive
Join Date: 10-26-03
Posts: 2,466
Latest Blog: None
|
Silly CSS issue
For my directory:
http://www.platinax.co.uk/directory/
There's a bad case of padding in the top left and top right part of the header.
I have no idea what's causing it - a look at the other pages of the site suggests that there's something forcing the content down from the top of the page, and this is what is causing some of the header cells to mis-shapen.
However, I have no idea what's causing it, other than it's bound to be a stupid simple thing.
Any help much appreciated - I'll offer a free directory listing for the correct answer.
|
|
|
10-19-2004, 05:21 AM
|
#2 (permalink)
|
|
Inactive
Join Date: 10-08-04
Location: threadwatch.org
Posts: 53
Latest Blog: None
|
Which bit? - should the flags be flush with top of screen?
|
|
|
10-19-2004, 06:37 AM
|
#3 (permalink)
|
|
No Longer Here
Join Date: 09-27-03
Location: State College, PA
Posts: 9,354
Latest Blog: None
|
The only thing I noticed right away is that you didn't end your body and html tags on that page.
|
|
|
10-19-2004, 08:53 PM
|
#4 (permalink)
|
|
Inactive
Join Date: 05-07-04
Posts: 749
Latest Blog: None
|
Do you mean how the nav bar doesnt match up with the left and right sides?
|
|
|
10-20-2004, 02:02 AM
|
#5 (permalink)
|
|
Inactive
Join Date: 10-26-03
Posts: 2,466
Latest Blog: None
|
Apologies - I wasn't very clear on that.
The first attachment shows how everything looks throughout the rest of the site.
The second attachment shows how the directory pages look.
I'm stumped as to what's causing the extra padding in the header.
|
|
|
10-20-2004, 09:46 AM
|
#6 (permalink)
|
|
Inactive
Join Date: 10-08-04
Location: threadwatch.org
Posts: 53
Latest Blog: None
|
Brian, can you post the relevent bit of html and any relevant css rules? - i'd quite like to help and im almost certain ive spotted it without seeing the code but i just have so little time today
Post the code, and uncle Nick W will fix the MF!
Nick
|
|
|
10-20-2004, 09:52 AM
|
#7 (permalink)
|
|
Inactive
Join Date: 10-08-04
Location: threadwatch.org
Posts: 53
Latest Blog: None
|
Ooops maybe not  I assumed it was html/css not tag soup! :eek: - dude, you havnt needed a <font> tag in almost 5yrs now
However, my 'guess' would be that the newlines are causing it.
<td><img
not
<td>
<img>
i'd bet ther is a ' ' <- space after your <td> tags...
it looks the same in Moz on whatever part of the site your on..
Nick
|
|
|
10-20-2004, 11:02 AM
|
#8 (permalink)
|
|
Inactive
Join Date: 10-26-03
Posts: 2,466
Latest Blog: None
|
Heh, thanks for the thoughts, Nick - nice to see you around here as well.
The tags aren't for the browsers - they're for the search engines. I never use CSS to embolden important text while the SE's can't read it.
Anyway, I think maybe I should just play around with this a bit more - reconstruct the HTML from scratch - it's bound to be a completely silly teensy weensy issue causing it all. 
|
|
|
10-20-2004, 11:12 AM
|
#9 (permalink)
|
|
Inactive
Join Date: 05-07-04
Posts: 749
Latest Blog: None
|
Ok, just change the meta tags for your page back to the directory info. But this fixed it on my computer:
Replace
PHP Code:
<HTML> <HEAD> <TITLE>Platinax Internet Business Directory - UK and International - </TITLE> <META NAME="description" CONTENT="Platinax Internet Business Directory UK and International "> <META NAME="keywords" CONTENT="Platinax Internet Business Directory UK and International ">
<link rel="stylesheet" type="text/css" media="all" href="http://www.platinax.co.uk/directory/directory.css" />
<link rel="SHORTCUT ICON" href="http://www.platinax.co.uk/favicon.ico" />
</HEAD> <body>
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" width="100%">
<tr> <td width="200" height="80" background="/images/bg-nav9.jpg" valign="middle"> <p align="center"><font size="4">P L A T I N A X</font><br /> <font size="2"><b>I N T E R N E T</b></font> </p> </td>
<td bgcolor="#ffffff" height="80">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" width="100%"> <tr> <td width="440"> <table width="440" border="0" cellpadding="0" cellspacing="0"> <tr valign="top"> <td width="88" height="57" background="/images/top-bg.gif" align="center" valign="middle"> <a href="http://www.platinax.co.uk/"><img src="/images/home.gif" alt="platinax internet: home" width="35" height="35"></a></td> <td width="88" height="57" background="/images/top-bg.gif" align="center" valign="middle"> <a href="http://www.platinax.co.uk/community/"><img src="/images/community.gif" alt="internet community" width="35" height="35"></a></td> <td width="87" height="57" background="/images/top-bg.gif" align="center" valign="middle"> <a href="http://www.platinax.co.uk/directory/"><img src="/images/about.gif" alt="platinax business directory" width="35" height="35"></a></td> <td width="87" height="57" background="/images/top-bg.gif" align="center" valign="middle"> <a href="http://www.platinax.co.uk/news/"><img src="/images/submissions.gif" alt="about platinax" width="35" height="35"></a></td> <td width="87" height="57" background="/images/top-bg.gif" align="center" valign="middle"> <a href="http://www.platinax.co.uk/contact/"><img src="/images/contact.gif" alt="contact platinax" width="35" height="35"></a></td> </tr> </table> </td> </tr> </table>
</td> <td bgcolor="#ffffff" width="140" height="80"><p align="center"> <img src="/images/great-britain.gif" alt="Great Britain and International" width="160" height="35"><br /> UK and International<br />Business Information</p></td>
</tr>
<tr> <td width="200" height="22" background="/images/internet-bg01.gif" valign="middle"><p align="center"><b>Web Resources:</b></p></td>
<td bgcolor="#ffffff">
<table border="0" cellspacing="0" cellpadding="0" background="/images/menu-bg01.gif" width="100%"> <tr><td>
<table width="440" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr valign="middle" height="22">
<td width="88" background="/images/m1a.gif" align="center"> <a href="http://www.platinax.co.uk/" class="menu">Home</a> </td> <td width="88" background="/images/m1a.gif" align="center"> <a href="http://www.platinax.co.uk/community/" class="menu">Community</a> </td>
<td width="88" background="/images/m1a.gif" align="center"> <a href="http://www.platinax.co.uk/directory/" class="menu">Directory</a> </td>
<td width="88" background="/images/m1a.gif" align="center"> <a href="http://www.platinax.co.uk/news/" class="menu">News</a> </td>
<td width="88" background="/images/m1a.gif" align="center"> <a href="http://www.platinax.co.uk/contact/" class="menu">Contact</a> </td>
</tr> </table>
</td></tr></table>
</td>
<td width="140" height="23" background="/images/menu-bg01.gif"> </td>
</tr>
With
PHP Code:
<html> <head> <title>Platinax: internet,business,marketing,webhosting,webmastering,design</title> <meta name="keywords" content="internet,web,business,marketing,SEO,webhosting,webmastering,search engine optimisation,webdesign,design" /> <meta name="description" content="Platinax Internet:free resources for business,marketing,webmastering,search engine optimisation,webhosting, and webdesign." />
<link rel="stylesheet" type="text/css" media="all" href="http://www.platinax.co.uk/platinax-internet.css" />
<link rel="SHORTCUT ICON" href="http://www.platinax.co.uk/favicon.ico" /> </head> <body>
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" width="100%">
<tr> <td width="200" height="80" background="/images/bg-nav9.jpg" valign="middle"> <p align="center"><font size="4">P L A T I N A X</font><br /> <font size="2"><b>I N T E R N E T</b></font> </p> </td>
<td bgcolor="#ffffff" height="80">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" width="100%"> <tr> <td width="440"> <table width="440" border="0" cellpadding="0" cellspacing="0"> <tr valign="top"> <td width="88" height="57" background="/images/top-bg.gif" align="center" valign="middle"> <a href="http://www.platinax.co.uk/"><img src="/images/home.gif" alt="platinax internet: home" width="35" height="35" /></a></td>
<td width="88" height="57" background="/images/top-bg.gif" align="center" valign="middle"> <a href="http://www.platinax.co.uk/community/"><img src="/images/community.gif" alt="internet community" width="35" height="35" /></a></td> <td width="87" height="57" background="/images/top-bg.gif" align="center" valign="middle"> <a href="http://www.platinax.co.uk/directory/"><img src="/images/about.gif" alt="platinax business directory" width="35" height="35" /></a></td> <td width="87" height="57" background="/images/top-bg.gif" align="center" valign="middle"> <a href="http://www.platinax.co.uk/news/"><img src="/images/submissions.gif" alt="about platinax" width="35" height="35" /></a></td> <td width="87" height="57" background="/images/top-bg.gif" align="center" valign="middle"> <a href="http://www.platinax.co.uk/contact/"><img src="/images/contact.gif" alt="contact platinax" width="35" height="35" /></a></td> </tr>
</table> </td> </tr> </table>
</td> <td bgcolor="#ffffff" width="140" height="80"> <p align="center"> <img src="/images/great-britain.gif" alt="Great Britain and International" width="160" height="35" /><br />
UK and International<br />Business Information</p> </td>
</tr>
<tr> <td width="200" height="22" background="/images/internet-bg01.gif" valign="middle">
<p align="center"><b>Web Resources:</b></p>
</td>
<td bgcolor="#ffffff">
<table border="0" cellspacing="0" cellpadding="0" background="/images/menu-bg01.gif" width="100%"> <tr><td>
<table width="440" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr valign="middle" height="22">
<td width="88" background="/images/m1a.gif" align="center"> <a href="http://www.platinax.co.uk/" class="menu">Home</a> </td>
<td width="88" background="/images/m1a.gif" align="center"> <a href="http://www.platinax.co.uk/community/" class="menu">Community</a>
</td>
<td width="88" background="/images/m1a.gif" align="center"> <a href="http://www.platinax.co.uk/directory/" class="menu">Directory</a> </td>
<td width="88" background="/images/m1a.gif" align="center"> <a href="http://www.platinax.co.uk/news/" class="menu">News</a> </td>
<td width="88" background="/images/m1a.gif" align="center"> <a href="http://www.platinax.co.uk/contact/" class="menu">Contact</a> </td>
</tr> </table>
</td></tr></table>
</td>
<td width="140" height="23" background="/images/menu-bg01.gif"> </td>
</tr>
Last edited by Shawn : 10-20-2004 at 11:31 AM.
|
|
|
10-20-2004, 11:43 AM
|
#10 (permalink)
|
|
Inactive
Join Date: 10-08-04
Location: threadwatch.org
Posts: 53
Latest Blog: None
|
Quote:
|
The tags aren't for the browsers - they're for the search engines. I never use CSS to embolden important text while the SE's can't read it
|
Sure, i would agree wholeheartedly on that! - my point is that <font> tags are not needed. Havnt been for years, in fact they have been deprecated for years and are extinct in modern html formats such as xhtml
for bold, se friendly text use: <strong> or <em> for emphasized text
for font specs use
font-family: arial, verdana, helvetica, sans-serif;
code bloat = bad text/code ratio = bad onpage seo ;-)
Nick
|
|
|
10-21-2004, 02:54 PM
|
#11 (permalink)
|
|
Inactive
Join Date: 10-26-03
Posts: 2,466
Latest Blog: None
|
Superb work, Shawn - that fixed it good.  Given you a few extra listings as thanks.
Certainly I agree, Nick - hopefully the only place I've used the font tag is in the title itself. Rather than use a graphic, I thought I'd take a gamble on trying to catch small searches in number based on search strings based on the keyword "Internet". Using a font tag with bold was just a way of trying to help that process on - though, really, I could have left the font out and gone straight to CSS. Depreciated, you say? Tsk. Search engines are losing their sense of style. 
|
|
|
10-21-2004, 03:27 PM
|
#12 (permalink)
|
|
Inactive
Join Date: 10-08-04
Location: threadwatch.org
Posts: 53
Latest Blog: None
|
You dont find <strong> has a good effect? I do....
|
|
|
10-21-2004, 03:35 PM
|
#13 (permalink)
|
|
Inactive
Join Date: 10-26-03
Posts: 2,466
Latest Blog: None
|
I was under the impression that strong, em, and bold, were pretty equivalent.
|
|
|
10-21-2004, 10:43 PM
|
| |