...

View Full Version : I'm sure you've heard it all before IE & Mozilla lineup issues



podopple
01-04-2010, 11:52 PM
Hi firstly I'm no programmer. My website scorpiographics.net does not line up correctly in mozilla, only the first page. IE is fine. With what I have gathered it has to do with tables and should be rewritten in CSS. Barring that is there a simple html code fix that will suffice? Thanks for your help.

drhowarddrfine
01-05-2010, 02:30 AM
Sometimes we don't have IE available so you need to specifically say what the problem is. In any case, Firefox will show what you wrote and that is the browser you should be testing with initially. IE is alway suspect.

Validate your html and css for a couple errors there that need fixing.

podopple
01-05-2010, 04:47 AM
Here's how it looks in Mozilla, only the content is not horizontally aligned.

http://i225.photobucket.com/albums/dd181/podopple/WebPageError.jpg

Excavator
01-05-2010, 05:15 AM
Hello podopple,
normally I would say that's an issue with absolute positioning and that the container of those elements needs to be position:relative;

With your site using tables though, I've no idea.
Since the table layout works on the index.php page, I would bet there are some mismatched </td> or </tr> tags on the pages that are not working. Something is getting closed in the wrong place.

podopple
01-05-2010, 05:25 AM
I'm guessing it's a big issue to recode the page without using tables?

Excavator
01-05-2010, 05:57 AM
I'm guessing it's a big issue to recode the page without using tables?

Oh yes, that would be a total re-write. :eek:
Scedule that for the next upgrade!

podopple
01-05-2010, 06:18 AM
If I could get one page rewritten would it be just a matter of copying and pasting the new code for every other page, with maybe a few corrections per page?

Rowsdower!
01-05-2010, 07:48 PM
If I could get one page rewritten would it be just a matter of copying and pasting the new code for every other page, with maybe a few corrections per page?

Basically, yes. If you generate the pages using a server-side script (like PHP) then you can essentially make a living template (or even separate templates for the header, footer, menu, sidebars, and main content sections if you like) and then just insert content where it needs to be. That part comes later though. First, the layout needs converted. Your layout looks pretty straightforward so the actual rewrite from tables to non-table layout shouldn't take that long at all.

The long part will just be learning to make padding, margins, and positioning do your bidding in the first place. The syntax for CSS is simple, but the whole method requires a total shift in thinking from your table days (no more place holder blank GIF images, no more slicing graphics, etc.). Old habits die hard.

It's certainly worth it to make the switch though and if you can afford the delay I'd do it right now rather than later.

Rowsdower!
01-05-2010, 08:06 PM
For now, the immediate cause of your problem is that this:


<div id="main">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>

<td align="center" valign="top">
<table width="550" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="center" align="center" valign="top"><img src="img/logo-creation.jpg" alt="Logo Creation" height="300" width="532" border="0"><br>
<table width="470" border="0" cellspacing="0" cellpadding="10" style="height: 227px;">
<tr>
<td class="center" align="left" valign="top" width="450">
Your initial step in marketing your endeavour is a professionally designed logo. This symbol will represent your product
or services and feature on all correspondence.<br>

<br>

Our philosophy is to create simple, unique, eye catching and recognisable designs. We have developed a procedure which
makes it easy and affordable to achieve the desired result.</td>
</tr>
</table>
<br>
</td>
</tr>
</table>

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

is sitting before anything else in the page AND the CSS gives #main absolute positioning. If you remove the absolute positioning from the CSS for #main and paste your code above in place of the highlighted portion of this section:

<td class="center" align="center" valign="top" bgcolor="white" width="549"><img src="img/header-logos.gif" alt="Logo Creation" height="57" width="550" border="0"><!-- paste the code right in here --></td>

you should see results as expected in FF.

Still, you should think of this as a "band aid" rather than a real solution. :thumbsup:

podopple
01-05-2010, 11:39 PM
That did the trick, thank you Rowsdower! for posting a bandaid solution until a complete rewrite is in the works. Thankyou also to Excavator & drhowarddrfine for showing interest in my dilemma and keeping this post fresh. Great work, very much appreciated!

CoffeeCup.com
01-07-2010, 03:33 PM
Hello,

Please visit the following sites to see if they can help you out:

http://www.wpdfd.com/issues/70/css_from_the_ground_up/
http://www.csszengarden.com/
http://www.alistapart.com/topics/design
http://www.w3schools.com/css/default.asp

Hope this helps!!! :thumbsup:
CoffeeCup.com



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum