Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Jun 2012
    Posts
    2
    Member #
    31897
    I need help guys! I created a pretty nice looking menu for our website, but the images suddenly don't line up correctly when going to the "forums" link! Tell me what you think the problem might be. My guess is somehow the forums styles are overriding the slice table styles. If so, what would be the solution? Any tips or hints would be greatly appreciated! It's such a small thing, and I know it can be solved easily!

    http://elysiumrt.guildomatic.com/forums/

    (Notice how the bottom clickable links at the top are shifted to the right and the koala's mouth is as well (since it's a separate image).

    If you click on the other links, the image returns to normal.

    Let me know if you can help!

    The code on each page is exactly the same!

    -----------------

    <html>
    <center>
    <head>
    <title>header1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- Save for Web Slices (header1.jpg) -->
    <table id="Table_01" width="1244" height="154" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td colspan="10">
    <img src="http://s.guildomatic.com/240543/host...3b4f622460.jpg" width="1244" height="123" alt=""></td>
    </tr>
    <tr>
    <td>
    <img src="http://s.guildomatic.com/240543/host...3642b08e84.jpg" width="126" height="31" alt=""></td>
    <td>
    <a href="/">
    <img src="http://s.guildomatic.com/240543/host...fa90adf8a0.jpg" width="65" height="31" border="0" alt=""></a></td>
    <td>
    <a href="/forums">
    <img src="http://s.guildomatic.com/240543/host...b191410519.jpg" width="76" height="31" border="0" alt=""></a></td>
    <td>
    <a href="/members">
    <img src="http://s.guildomatic.com/240543/host...ded33158b8.jpg" width="71" height="31" border="0" alt=""></a></td>
    <td>
    <a href="/news">
    <img src="http://s.guildomatic.com/240543/host...bf50a9a37b.jpg" width="60" height="31" border="0" alt=""></a></td>
    <td>
    <a href="/raid_calendar">
    <img src="http://s.guildomatic.com/240543/host...1d2c04bb88.jpg" width="93" height="31" border="0" alt=""></a></td>
    <td>
    <a href="/dkp">
    <img src="http://s.guildomatic.com/240543/host...8b07960f40.jpg" width="47" height="31" border="0" alt=""></a></td>
    <td>
    <a href="/raids">
    <img src="http://s.guildomatic.com/240543/host...3e7a04045d.jpg" width="59" height="31" border="0" alt=""></a></td>
    <td>
    <a href="/items">
    <img src="http://s.guildomatic.com/240543/host...454024392b.jpg" width="64" height="31" border="0" alt=""></a></td>
    <td>
    <img src="http://s.guildomatic.com/240543/host...73e39ecfd3.jpg" width="583" height="31" alt=""></td>
    </tr>
    </table>
    </center>
    <!-- End Save for Web Slices -->
    </body>
    </html>

    -----------------

    Regards,
    Takashira

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Tables, Save for Web, and image-based design all tend to have those issues. That can often cause a design to break. It's also possible, like you mentioned, that some of your styles are being overridden. I don't see a DOCTYPE up there, either, so that may be it.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    I'm seeing 2 count 'em 2 <body> tags along with 2 <head> sections... 1 with CSS calls, one not...

    Clean up the second set of code for the head section ... Quit confusing the browser.

  5. #4
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Just another quick point...

    When linking CSS and js external files... Put all you as together and all your js together... I always suggest putting CSS above js, cause you can reference the CSS attributes from the js file... So CSS needs to be loaded first.

    Just a suggestion

  6. #5
    Senior Member Fireproofgfx's Avatar
    Join Date
    Apr 2012
    Location
    Washington
    Posts
    839
    Member #
    31498
    Liked
    171 times
    You will notice that you didn't add border="0" to the parts that are actually broken so do that and it should fix the problem.

  7. #6
    Junior Member
    Join Date
    Jun 2012
    Posts
    2
    Member #
    31897
    Hello all. Unfortunately I haven't had any luck whatsoever with getting the images to line up, regardless of what I do. Adding /div, adding border="0" to everything, and still no results. I appreciate the time you guys took to help, but with my limited css/html knowledge, I can't seem to figure this out. I compared codes from another site that has the same kind of slice layout as I do on my forums, and could not find any differences, aside from:



    <body>

    <div id="root"><div id="phpbb3">

    <table id="root_table">

    <tr>



    Which sites above my revised code here:

    <center>
    <table id="Table_01" width="1244" height="154" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td colspan="10">
    <img src="http://s.guildomatic.com/240543/host...3b4f622460.jpg" width="1244" height="123" alt=""></td>
    </tr>
    <tr>
    <td>
    <img src="http://s.guildomatic.com/240543/host...3642b08e84.jpg" width="126" height="31" alt=""></td>
    <td>
    <a href="/">
    <img src="http://s.guildomatic.com/240543/host...fa90adf8a0.jpg" width="65" height="31" border="0" alt=""></a></td>
    <td>
    <a href="/forums">
    <img src="http://s.guildomatic.com/240543/host...b191410519.jpg" width="76" height="31" border="0" alt=""></a></td>
    <td>
    <a href="/members">
    <img src="http://s.guildomatic.com/240543/host...ded33158b8.jpg" width="71" height="31" border="0" alt=""></a></td>
    <td>
    <a href="/news">
    <img src="http://s.guildomatic.com/240543/host...bf50a9a37b.jpg" width="60" height="31" border="0" alt=""></a></td>
    <td>
    <a href="/raid_calendar">
    <img src="http://s.guildomatic.com/240543/host...1d2c04bb88.jpg" width="93" height="31" border="0" alt=""></a></td>
    <td>
    <a href="/dkp">
    <img src="http://s.guildomatic.com/240543/host...8b07960f40.jpg" width="47" height="31" border="0" alt=""></a></td>
    <td>
    <a href="/raids">
    <img src="http://s.guildomatic.com/240543/host...3e7a04045d.jpg" width="59" height="31" border="0" alt=""></a></td>
    <td>
    <a href="/items">
    <img src="http://s.guildomatic.com/240543/host...454024392b.jpg" width="64" height="31" border="0" alt=""></a></td>
    <td>
    <img src="http://s.guildomatic.com/240543/host...73e39ecfd3.jpg" width="583" height="31" alt=""></td>
    </tr>
    </table>
    </center>

    Whatever they've defined "root" and "phpbb" as, it's probably forcing the table to keep it's defined specifications, but it's just a guess.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:56 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com