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 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    layout not looking right on other computers?

    i'm almost going insane here aha, my website looks perfect whenever i view it on my computer, but as soon as i take a look at it on different computer it looks all out of line.
    it's frustrating me so much and i don't really know what to do.
    my website is
    http://kaitlinkuhn.co/

    and it's supposed to look like this
    http://i36.tinypic.com/n5rk8g.jpg

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    run your code through the validator at validator.w3.org
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i validated my coding to the best that i can, but it still looks off....
    my slideshow and content just seem to shift to the side :\

    here's my coding if this helps at all....
    Code:
    body, html {
    padding : 0;
    margin : 0;
    }
    body {
    background : #f9eaa3 url(http://i33.tinypic.com/2enc7ih.jpg) repeat-y center;
    text-align : center;
    font : 85%/170% "Arial", sans-serif;
    color : #202020;
    }
    #container {
    text-align : left;
    margin-top : 0;
    width : 840px;
    background : transparent;
    margin-left : auto;
    margin-right : auto;
    }
    #header {
    height : 264px;
    background : url(http://i38.tinypic.com/33l03fb.jpg) repeat;
    text-align : center;
    margin-left : auto;
    margin-right : auto;
    margin-top : 0;
    }
    #sidebar {
    width : 200px;
    float : right;
    margin-bottom : 20px;
    margin-right : 70px;
    }
    #content {
    width : 540px;
    padding : 10px;
    margin-bottom : 20px;
    float : left;
    }
    #slidesho {
    margin-right : auto;
    margin-left : auto;
    left : 234px;
    margin-top : -256px;
    }
    #footer {
    clear : both;
    text-align : left;
    background : transparent;
    padding : 10px;
    height : 40px;
    }
    a:link, a:visited {
    text-decoration : none;
    color : #595959;
    font-weight : 400;
    text-align : justify;
    padding : 0;
    text-decoration : none;
    }
    a:hover {
    color : #595959;
    text-decoration : underline;
    }
    .date {
    background : #fff url("http://i35.tinypic.com/zjdwnc.jpg") repeat-x scroll left top;
    width : 60px;
    height : 60px;
    text-align : center;
    color : #fff;
    font-family : Arial, Helvetica, sans-serif;
    text-transform : uppercase;
    float : left;
    margin : 5px 5px 0 5px;
    display : inline;
    overflow : hidden;
    }
    .date .date-day {
    color : #333;
    font-family : Georgia, "Times New Roman", Times, serif;
    font-size : 35px;
    }
    .date .date-month {
    font-size : 11px;
    font-weight : bold;
    }
    and

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title><?php bloginfo('name'); ?></title>
    <?php wp_head(); ?>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    </head>
    <body>
    
    <div id='header'>
    <img src="http://i38.tinypic.com/4re15h.jpg" border="0" usemap="#headerr" alt="" />
    
    <map name="headerr">
    <area shape="rect" coords="287,183,341,235" href="http://playingdead.tumblr.com" alt="" />
    <area shape="rect" coords="345,182,400,237" href="kaitlinkuhn@live.ca" alt="" />
    <area shape="rect" coords="405,183,457,237" href="http://flickr.com/cavein" alt="" />
    <area shape="rect" coords="463,185,524,238" href="http://facebook.com/kaitlink" alt="" />
    <area shape="rect" coords="531,182,582,237" href="http://twitter.com/demonfestival" alt="" />
    </map>
    
    
    </div>
    
    
    
    <div id="slidesho">
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript" src="/wp-content/themes/tem/fadeslideshow.js">
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    
    <script type="text/javascript">
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "slidesho", //ID of blank DIV on page to house Slideshow
    	dimensions: [346, 243], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://i37.tinypic.com/v66ecg.jpg", "", "", " kaitlin kuhn."],
    		["http://i37.tinypic.com/2m665qa.jpg", "", "", " kaitlin kuhn."],
    		["http://i34.tinypic.com/2yx3zub.jpg", "", "", " kaitlin kuhn."],
    		["http://i36.tinypic.com/10ge61y.jpg", "", "", " kaitlin kuhn."] // no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: ""
    })
    </script>
    </div>
    
    <div id="container">
    <div id="sidebar">
    
    <h2>Sidebar</h2>
    This is your sidebar, you can add whatever you like to it. For example, site statistics, affiliates, layout information, and so on.<br />
    <br />
    <h2>Sidebar</h2>
    This is your sidebar, you can add whatever you like to it. For example, site statistics, affiliates, layout information, and so on.<br />
    <br />
    <h2>Sidebar</h2>
    This is your sidebar, you can add whatever you like to it. For example, site statistics, affiliates, layout information, and so on.
    </div> <!-- closes sidebar div --> 
    
    <div id="content" />
    Last edited by chess; 08-23-2010 at 12:49 AM.

  • #4
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts
    Your site looks perfectly fine to me on google chrome. Picture perfect you might say

  • #5
    MJo
    MJo is offline
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    View how it looks in a variety of browsers... at browsershots.org/

    Not to discourage you... but this could be important ...

    http://browsershots.org/

    Perhaps you should decide what the majority of your audience will use and focus on making it work in those browsers.

  • #6
    New Coder
    Join Date
    May 2010
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Buddy your website is looking perfect in all of my browsers.

  • #7
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    It looks wrong to me in FF3.6.8 and IE6.

    I would recommend you change your source code slightly. Dump the image map and use semantic code (a list) for the nav menu.

    Remove the slideshow until after you have got the page structure worked out. That means you know the page is right and any wronglnees that comes later is caused by the css relative to the slideshow. slidshow seems wrong too where the sliding image is not directly on top of the base.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there chess,

    as our friend bazz has suggested...
    I would recommend you change your source code slightly.
    Dump the image map and use semantic code (a list) for the nav menu.
    With that in mind check out this link...

    ...which contains a reworking of the top of your document.

    coothead

  • #9
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    yeh coothead, that should give the idea but, there are a few things to consider.

    1. position:absolute isn't needed and can cause unseen/hard to find difficulties with layout.
    2. the menu on that site is in tables and not in a list, which it ought to be for proper semantics


    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #10
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there bazz,

    1. position:absolute isn't needed and can cause unseen/hard to find difficulties with layout.
    2. the menu on that site is in tables and not in a list, which it ought to be for proper semantics
    I have used neither position:absolute nor tables in my code.
    This is the HTML file used...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title>kaitlin kuhn - blog and portfolio</title>
    
    <link rel="stylesheet" type="text/css" href="css/test.css">
    
    <!--[if IE 6 ]>
    <link rel="stylesheet" type="text/css" href="css/ie6-test.css">
    <![endif]-->
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://kaitlinkuhn.co/wp-content/themes/tem/fadeslideshow.js"></script>
    <script type="text/javascript" src="scripts/gallery.js"></script>
    
    </head>
    <body>
    
    <div id="wrapper">
    
    <div id="header">
    
    <ul>
      <li><a id="tumblr" href="http://playingdead.tumblr.com">playingdead.tumblr.com</a></li>
      <li><a id="mailto" href="mailto:kaitlinkuhn@live.ca">kaitlinkuhn@live.ca</a></li>
      <li><a id="flickr" href="http://flickr.com/cavein">flickr.com/cavein</a></li>
      <li><a id="facebook" href="http://facebook.com/kaitlink">facebook.com/kaitlink</a></li>
      <li><a id="twitter" href="http://twitter.com/demonfestival">twitter.com/demonfestival</a></li>
    </ul>
    
    <div id="slidesho"></div>
    
    </div><!-- end #header -->
    
    <div id="container">
    
    <div id="content">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
    pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
    orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes, 
    nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
    sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
    Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
    Pellentesque in dui. In eget elit. Praesent eu lorem.
    </p><p>
    Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, 
    orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum 
    augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet 
    interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque 
    lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis, 
    lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi. 
    Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum 
    volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla. 
    Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
    metus urna, semper eget, aliquam ac, feugiat nec, massa.
    </p>
    </div><!-- end #content -->
    
    <div id="sidebar">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
    pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
    orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes, 
    nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
    sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
    Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
    Pellentesque in dui. In eget elit. Praesent eu lorem.
    </p>
    </div><!-- end #sidebar -->
    
    </div><!-- end #container -->
    
    </div><!-- end #wrapper -->
    
    </body>
    </html>
    
    ...and this is the CSS file used...
    Code:
    
    
    body {
        margin:0;
        padding:0;
        background-color:#f9eaa3;
        background-image:url(../images/body-bg.png);
        background-repeat:repeat-x;
        background-position:center 0;
        font-family:arial,sans-serif;
        font-size:100%;
     }
    #wrapper {
        width:932px;
        margin:auto;
     }
    #header {
        height:256px;
        padding-top:8px;
        background-image:url(../images/header-bg.png);
        background-position:-24px top;
        background-repeat:no-repeat;
     }
    #header ul {
        float:left;
        display:inline;
        padding:0;
        margin:176px 0 0 264px;
        list-style-type:none;
     }
    #header li {
        float:left;
     }
    #header a {
        display:block;
        text-indent:-9999px;
        outline:none;
     }
    #tumblr {
        width:50px;
        height:50px; 
     }
    #mailto {
        width:46px;
        height:50px; 
        margin-left:10px;
     }
    #flickr {
        width:46px;
        height:50px; 
        margin-left:12px;
     }
    #facebook {
        width:46px;
        height:50px; 
        margin-left:20px;
     }
    #twitter {
        width:46px;
        height:50px; 
        margin-left:18px;
     }
    #slidesho {
        float:left;
        margin-left:14px;
    }
    #container { 
        padding-bottom:20px;
        background-image:url(../images/content-bg.png);
        background-repeat:repeat-y;
        background-position:-24px top;
        overflow:hidden;
        font-size:80%;
     }
    #content {
        float:left;
        width:540px;
        padding:10px;
        margin-left:86px;
     }
    #sidebar {
        float:left;
        width:224px;
        padding:10px;
     }
    
    The reason for using Megaupload.com was for the modified images.

    coothead

  • #11
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    The code you have just posted looks fine to me but here is part of the code I got from the link you posted.

    Code:
    <div id="main">
    
    
    
    
    <div style="position:relative; width:980px; height:85px;">
    
    
    <div style="position:absolute; left:5px; top:6px;"><a href="?"><IMG SRC="http://wwwstatic.megaupload.com/gui2/logo.gif" WIDTH="338" HEIGHT="38" BORDER="0" ALT=""></a></div>
    
    
    
    
    
    
    <div style="position:absolute; width:250px; height:18px; top:17px; left:570px; text-align:right; font-family:arial; font-size:12px;">
    <a href="?c=login&next=d%3DBL9LSRFP" style="color:#000000;">Login</a> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="?c=signup" style="color:#000000;">Register</a>
    </div>
    
    
    
    
    
    <script language="JavaScript" type="text/javascript">
    
    var MenuImgs = new Array(7);
    var MImgs = new Array(7);
    
    MImgs[0]		= new Image(184, 32);
    MenuImgs[0]		= new Image(184, 32);
    MenuImgs[0].src = "http://wwwstatic.megaupload.com/gui2/menu/en/menuo_01.gif";
    MImgs[1]		= new Image(130, 32);
    MenuImgs[1]		= new Image(130, 32);
    MenuImgs[1].src = "http://wwwstatic.megaupload.com/gui2/menu/en/menuo_02.gif";
    MImgs[2]		= new Image(126, 32);
    MenuImgs[2]		= new Image(126, 32);
    MenuImgs[2].src = "http://wwwstatic.megaupload.com/gui2/menu/en/menuo_03.gif";
    MImgs[3]		= new Image(122, 32);
    MenuImgs[3]		= new Image(122, 32);
    MenuImgs[3].src = "http://wwwstatic.megaupload.com/gui2/menu/en/menuo_04.gif";
    MImgs[4]		= new Image(149, 32);
    MenuImgs[4]		= new Image(149, 32);
    MenuImgs[4].src = "http://wwwstatic.megaupload.com/gui2/menu/en/menuo_05.gif";
    MImgs[5]		= new Image(146, 32);
    MenuImgs[5]		= new Image(146, 32);
    MenuImgs[5].src = "http://wwwstatic.megaupload.com/gui2/menu/en/menuo_06.gif";
    MImgs[6]		= new Image(133, 32);
    MenuImgs[6]		= new Image(133, 32);
    MenuImgs[6].src = "http://wwwstatic.megaupload.com/gui2/menu/en/menuo_07.gif";
    </script>
    
    <div style="position:absolute; left:0px; top:49px;">
    <TABLE cellpadding="0" cellspacing="0">
    <TR>
    	<TD><a href="?c=signup"><IMG SRC="http://wwwstatic.megaupload.com/gui2/menu/en/menu_01.gif" WIDTH="184" HEIGHT="32" BORDER="0" ALT="" onmouseover="MImgs[0].src=this.src; this.src=MenuImgs[0].src;" onmouseout="this.src=MImgs[0].src;"></a></TD>
    	<TD><a href="?c=premium"><IMG SRC="http://wwwstatic.megaupload.com/gui2/menu/en/menu_02.gif" WIDTH="130" HEIGHT="32" BORDER="0" ALT="" onmouseover="MImgs[1].src=this.src; this.src=MenuImgs[1].src;" onmouseout="this.src=MImgs[1].src;"></a></TD>
    	<TD><a href="?c=rewards"><IMG SRC="http://wwwstatic.megaupload.com/gui2/menu/en/menu_03.gif" WIDTH="126" HEIGHT="32" BORDER="0" ALT="" onmouseover="MImgs[2].src=this.src; this.src=MenuImgs[2].src;" onmouseout="this.src=MImgs[2].src;"></a></TD>
    	<TD><a href="?c=top100"><IMG SRC="http://wwwstatic.megaupload.com/gui2/menu/en/menu_04.gif" WIDTH="122" HEIGHT="32" BORDER="0" ALT="" onmouseover="MImgs[3].src=this.src; this.src=MenuImgs[3].src;" onmouseout="this.src=MImgs[3].src;"></a></TD>
    	<TD><a href="?c=tools"><IMG SRC="http://wwwstatic.megaupload.com/gui2/menu/en/menu_05.gif" WIDTH="149" HEIGHT="32" BORDER="0" ALT="" onmouseover="MImgs[4].src=this.src; this.src=MenuImgs[4].src;" onmouseout="this.src=MImgs[4].src;"></a></TD>
    	<TD><a href="?c=support"><IMG SRC="http://wwwstatic.megaupload.com/gui2/menu/en/menu_06.gif" WIDTH="146" HEIGHT="32" BORDER="0" ALT="" onmouseover="MImgs[5].src=this.src; this.src=MenuImgs[5].src;" onmouseout="this.src=MImgs[5].src;"></a></TD>
    	<TD><a href="?c=faq"><IMG SRC="http://wwwstatic.megaupload.com/gui2/menu/en/menu_07.gif" WIDTH="133" HEIGHT="32" BORDER="0" ALT="" onmouseover="MImgs[6].src=this.src; this.src=MenuImgs[6].src;" onmouseout="this.src=MImgs[6].src;"></a></TD>
    
    </TR>
    <TR>
    	<TD colspan="7"><IMG SRC="http://wwwstatic.megaupload.com/gui2/menu/shadow.gif" WIDTH="990" HEIGHT="4" BORDER="0" ALT=""></TD>
    </TR>
    </TABLE>
    </div>
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #12
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there bazz,

    you are either pulling my leg or you've just taken an extra large toke on your spliff.

    Why on earth would you want to view the the source code of megaupload.com?

    If you really wish top see the fruits of my labours, then you must download the zip file that I have placed there.

    coothead
    Last edited by coothead; 08-23-2010 at 05:35 PM.

  • #13
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Quote Originally Posted by coothead View Post
    Why on earth would you want to view the the source code of megaupload.com?
    I didn't I was merely using the link you posted to see the source code that you were referring to (unintentionally, I now understand). had your link been to a zip file, it would have ben clearer that you weren't linking to megaupload.

    I need a spliff now

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #14
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there bazz,

    this is the information to be found on the megaupload.com page...

    Filename: chess.zip
    File description: reworking of the top of the document
    File size: 513.14 KB
    I reckon that you must be going for your second or third spliff not your first. :lD

    coothead

  • Users who have thanked coothead for this post:

    Decker (08-23-2010)


  •  

    Posting Permissions

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