/    Sign up×
Community /Pin to ProfileBookmark

Identical code, different results

Copy linkTweet thisAlerts:
Feb 13.2007

I’ve stared a hole through this and simply cannot figure out what the problem is with these two pages. The Index page nav displays correctly, the Pricing & Info page is blown apart by some sort of freak double spacing in the navbar. [B]The nav code is identical for both pages from the same stylesheet[/B]. I’m hoping fresh eyes can determine the problem.

[URL=”http://www.blueridgestock.com/Index.htm”]Index[/URL]

[URL=”http://www.blueridgestock.com/PricingAndInfo.htm”]Pricing & Info[/URL]

Thanks,

John
[email][email protected][/email]

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@ToonMarinerFeb 13.2007 — This is going to be a bit of a chore for you (if only you coded table-less layouts.)

You are going to have to trace back the document tree. The style of that table cell has about 10 parents (10 elements to inherit from) and some of those parent elements have classes or ids that differ from one page to the other.

These are the paths to your element of interest through the document tree.

Index page:

html > body > table > tbody > tr > td .IndexNavBkgrnd > table > tbody > tr > td

The Pricing page:

html > body > table .MainText > tbody > tr > td .PricingNavBkgrnd > table > tbody > tr > td

It is due to the differences in those two paths that will account for the differences inherited properties in the css.

Which means you will have to retrace back through the styles applied to the relevant elements and classes and see which one has some padding or margin greater than the other - and that MAY solve your problem.
Copy linkTweet thisAlerts:
@grumpyoldtechsFeb 13.2007 — not meaning to cause offense but that is MESSY HTML.

i can't make head nor tail of it.

firstly table layouts should be banned

secondly you are using fixed heights on depreciated tags (height="" etc...) all styling should be done via CSS in a style sheet.

view the source of my sig for an example.

the only thing which i can see being an issue is that your defining heights.

there is no need for a table here (tbh there is not need for one in the whole page) but that could be causing your problem. nested tables are a bad idea
[code=html]


as i suggest to most people i reccomend you google "CSS box model" and "css layout tutorial"
<TD height="327" class="PricingInfoNavBkgrnd">
<table width="82%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="4%">&nbsp;</td>
<td width="96%"><span class="MainLinksList"> <a href="TestGallery1/Top/default.htm">Naturescapes</a><br>
<a href="#">Charlottesville-Albemarle</a><br>
<a href="#">U.Va.</a><br>

<a href="#">Winter</a><br>
<a href="#">Wildlife &amp; Creatures</a><br>
<a href="#">Outdoor Adventure</a><br>
<a href="#">Miscellany</a></span><br>
<br>
<span class="SecondaryLinks">

<a href="Index.htm">Home Page</a><br>
<a href="#">Pricing & Information</a><br>
<a href="GalleriesContact.htm">Contact</a><br>
</span></td>
</tr>
</table></TD>
[/code]
Copy linkTweet thisAlerts:
@johndoveauthorFeb 13.2007 — Thank you both for your replies.

Tool: Thank you for enlightening me on how that works. The culprit, I suspect is that .MainText style.

Grumpy: I'm the first to admit I'm not a very good coder and I haven't been able to get away from applying within tables as opposed to doing away with tables altogether. Thank you for your tutorial recommendations. Question: Though I know it is CORRECT to go "tableless" with .css, is it worth creating a 100-style .css file to build a 6-page site? Also, without using tables, should you just create background image styles WITH text formatting included to set type over graphics (so that a separate text "container" isn't required?)

Thanks again.
Copy linkTweet thisAlerts:
@johndoveauthorFeb 13.2007 — Tool,

Actually it wasn't much of a chore at all. I found the bad code in about 20 seconds once I knew what the problem was (thanks to you). Appreciated.

John
Copy linkTweet thisAlerts:
@grumpyoldtechsFeb 13.2007 — Thank you both for your replies.

Tool: Thank you for enlightening me on how that works. The culprit, I suspect is that .MainText style.

Grumpy: I'm the first to admit I'm not a very good coder and I haven't been able to get away from applying within tables as opposed to doing away with tables altogether. Thank you for your tutorial recommendations. Question: Though I know it is CORRECT to go "tableless" with .css, is it worth creating a 100-style .css file to build a 6-page site? Also, without using tables, should you just create background image styles WITH text formatting included to set type over graphics (so that a separate text "container" isn't required?)

Thanks again.[/QUOTE]


there are many different ways to do this. yes having 1 background image and laying the content over the top is one method as long as its all formatted and correctly marked up there is no problem with this. especially with complex designs. but most of the time you break it down (but in a completely different way to what you would a table laid out site.)

you require ALOT more styling and code for a table layout compared to a CSS layout.

as you progress you start to learn which is the best method for what you ware doing.

Rather than trying to make bad code work sometimes its quicker to learn how to write good code and write it properly.
×

Success!

Help @johndove spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...