Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jan 2010
    Location
    Australia
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    I'm sure you've heard it all before IE & Mozilla lineup issues

    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.

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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.

  • #3
    New Coder
    Join Date
    Jan 2010
    Location
    Australia
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Here's how it looks in Mozilla, only the content is not horizontally aligned.


  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    podopple (01-05-2010)

  • #5
    New Coder
    Join Date
    Jan 2010
    Location
    Australia
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I'm guessing it's a big issue to recode the page without using tables?

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by podopple View Post
    I'm guessing it's a big issue to recode the page without using tables?
    Oh yes, that would be a total re-write.
    Scedule that for the next upgrade!
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Jan 2010
    Location
    Australia
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  • #8
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by podopple View Post
    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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #9
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    For now, the immediate cause of your problem is that this:

    Code:
    	<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:
    Code:
    <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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    podopple (01-05-2010)

  • #10
    New Coder
    Join Date
    Jan 2010
    Location
    Australia
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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!

  • #11
    New Coder
    Join Date
    Oct 2009
    Posts
    23
    Thanks
    0
    Thanked 1 Time in 1 Post
    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!!!
    CoffeeCup.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •