Is FireFox letting me down?

Dev Articles Community Forums Sponsor:

You eat, breathe and sleep innovation. Build your mobile intelligence with BlackBerry® experts this July. Register Today!

August 23rd, 2006, 04:55 PM

SnapCracker

Contributing User

Join Date: Jan 2005

Location: Kent, United Kingdom

Posts: 165

Time spent in forums: 2 Days 21 h 22 m 31 sec
Reputation Power: 4

Is FireFox letting me down?

Hi, On my website I display mySQL/php results sometimes in boxes to make them visually more appealing. The boxes are 1 pixel wide lines which are done I've discovered, by putting a table within a table making the outer one 1 pixel bigger and say black and inner one white.
like this

Code:

<table width="499" cellspacing="0" bgcolor="#000000">
	    <tr>
	      <td width="498" height="100%" valign="top">
	        <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="FFFFFF">
	          
			  <tr> 
	  			<td bgcolor="#CCFF66" width="5" height="20"><!--DWLayoutEmptyCell-->&nbsp;</td>
	There is more cells in here but I've removed them for simplicity

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

It works well with IE and SAFARI for MAC, but I't a big black square in FireFox as if it doesn't like the inner white table. Why is this happening?

August 24th, 2006, 09:08 AM

MadCowDzz

I'm Internet Famous

Dev Articles Frequenter (2500 - 2999 posts)

Join Date: Jan 2003

Location: Toronto, Canada

Posts: 2,890

Time spent in forums: 1 Week 16 h 4 m 48 sec
Reputation Power: 8

tables, eh?

Perhaps you meant to write:

Code:

<style>
.messageBox {
	border: 1px solid #000;
	background-color: #cf6;
	color: #000;
	width: 499px;
}
</style>

<div class="messageBox">*</div>

For the record, your original code works fine in my Firefox 1.5.0.3/Win

__________________
Daryl's Homepage | My Blogroll | My Profile | Firefox supporter!
DevArticles Forum Moderator

"The net is a waste of time, and that's exactly what's right about it." -- William Gibson

August 25th, 2006, 04:08 AM

SnapCracker

Contributing User

Join Date: Jan 2005

Location: Kent, United Kingdom

Posts: 165

Time spent in forums: 2 Days 21 h 22 m 31 sec
Reputation Power: 4

Thanks for trying that out in FF 1.5, that is a great help. Yes, you're right, I do have get rid of those tables I have scattered around my code. I will gradually get rid of that old code. Thanks again.

August 25th, 2006, 09:27 AM

SnapCracker

Contributing User

Join Date: Jan 2005

Location: Kent, United Kingdom

Posts: 165

Time spent in forums: 2 Days 21 h 22 m 31 sec
Reputation Power: 4

Umm! I'm getting a little confused here. Dzz you have given me that push I need to make the changes to the website to XHTML, at least I think that was in your mind. I been reading a book about CSS and the webpages they describe still have a table (not nested admittedly), tr and td tags which I use anyway. However, I'm still a little confused over the use of div tags ( I tried out your messagebox and it worked great, but I don't know how to fill it with text in different places like I had with the nested table) I use div tags only sometimes thoughout the website, but it sounds as if I should use divs extensively replacing alot of existing tags I use presently. Would you have a simple summery of what XHTML compliant code comprises of? or is that a huge question? PS. Have you tried Win apps on the MacBook?

August 28th, 2006, 09:51 AM

MadCowDzz

I'm Internet Famous

Join Date: Jan 2003

Location: Toronto, Canada

Posts: 2,890

Time spent in forums: 1 Week 16 h 4 m 48 sec
Reputation Power: 8

No, I haven't tried Win apps... just Universal Binaries

The push towards standard XHTML code is quite a big one... One of the biggest things to consider is semantec markup, meaning, use tags that best describe what is on your page.

A good way to start is to consider the basic page... a header, footer, and content middle...

A table-based site might look like this:

Code:

<table bgcolor="#fcfcfc" cellspacing="0" cellpadding="0">
<tr><td class="header" bgcolor="#ff0000"><h1>My Page!</h1></td></tr>
<tr><td class="content"><p>Welcome to my super-cool-awesome-homepage!</p></td></tr>
<tr><td class="footer" bgcolor="#ff0000"><p><b>Creative commons!</b> 2006, Me!</p></td></tr>
</table>

The same page, assuming decent markup in CSS (not shown in this post, but I can if you want)

Code:

<h1 id="header">My Page!</h1>
<p>Welcome to my super-cool-awesome-homepage!</p>
<p id="footer"><b>Creative commons!</b> 2006, Me!</p>

A DIV tag is often considered a container... Myself, I use it to represent the sections of a page... I usually start with four DIVs: header, content, footer, navigation. You can then use CSS to position them and/or pad them as necessary. My example above doesn't represent this... =)

Basically, think of ways to break your webpage down into sections. Use each section as a DIV.

November 10th, 2006, 06:30 AM

¤| battousai |¤

Contributing User

Join Date: Oct 2006

Posts: 30

Time spent in forums: 10 h 17 m 53 sec
Reputation Power: 2

sorry to interupt this nice exange of information. But I could't help but noticed your 2nd example. I see no DIV tags in there, so I'l asume you make good use of the Position selector provided in CSS.

Still I am strugling myself wether to use Tables or just Divisions instead.

I didn't quite get the big push towards standard XHTML thing. Could you explain this a bit?

November 10th, 2006, 08:23 AM

MadCowDzz

I'm Internet Famous

Join Date: Jan 2003

Location: Toronto, Canada

Posts: 2,890

Time spent in forums: 1 Week 16 h 4 m 48 sec
Reputation Power: 8

Hi battousai,

I would typically use DIV tags to represent each section: header, navigation menu, content, footer. Looks like I chose not to put it in that example because it would bloat the code (the example is so sparse it would have looked weird).

Consider two ways of writing code... an un-styled (no-css) page would look the same

Example 1:

Code:

<div> id="header">
	<h1>My Page!</h1>
</div>

<div id="navigation">
	<ul>
		<li>Home</li>
		<li>Projects</li>
		<li>Links</li>
		<li>Contact me</li>
	</ul>
</div>

<div id="content">
	<p>Welcome to my super-cool-awesome-homepage!</p>
	<p>This paragraph talks about me</p>
</div>

<div id="footer">
	<p>© 2006, Me!</p>
</div>

Example 2:

Code:

<h1 id="header">My Page!</h1>

<ul id="navigation">
	<li>Home</li>
	<li>Projects</li>
	<li>Links</li>
	<li>Contact me</li>
</ul>


<div id="content">
	<p>Welcome to my super-cool-awesome-homepage!</p>
	<p>This paragraph talks about me</p>
</div>

<p id="footer">© 2006, Me!</p>

There's nothing wrong with either example, both will validate. Personally, I enjoy using less DIVs in favour of semantic code. I find it cleaner and less-bulkier.

November 10th, 2006, 10:15 AM

¤| battousai |¤

Contributing User

Join Date: Oct 2006

Posts: 30

Time spent in forums: 10 h 17 m 53 sec
Reputation Power: 2

Ok, if I get this right, you don't make use of any divisions in the second example. Asuming you wil still want the same layout as in example1 you probably have the 'position' selector set to each uniform identifier, right?

November 15th, 2006, 01:06 AM

infamous-online

Moderator

Join Date: Apr 2002

Posts: 404

Time spent in forums: 1 Day 24 m 44 sec
Reputation Power: 7

it's not FF letting you down, it's IE that's letting you down. i hate to be blunt about it.

__________________
Apache Expert

#10

November 15th, 2006, 08:26 AM

MadCowDzz

I'm Internet Famous

Join Date: Jan 2003

Location: Toronto, Canada

Posts: 2,890

Time spent in forums: 1 Week 16 h 4 m 48 sec
Reputation Power: 8

Quote:

Originally Posted by ¤| battousai |¤

I'm not too sure I know what you mean by position selector... can you clarify?
I can think of a couple different meanings.

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: