SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Chrome presentation not working right

    My home page looks correct when seen on my desktop in FF or IE11. However, in Chrome, the page margins are much too large; also the additional margins for the content are much too large.
    The page is www.vintagetextile.com
    The main style sheet (home.css):
    Code:
    html {overflow-y:scroll;}
    body {max-width:980px;margin: 0 auto; border:0;color:#000;background-color:#fff;
    	font: 1em/1.2 Verdana, Tahoma, Helvetica, sans-serif;}
    #preface{padding:.3em;	margin-bottom:1.2em; font-size:1.04em;line-height:1.17}
    #format{width:80%;word-spacing:-.1em;margin-left:auto; margin-right:auto;}
    #top{margin-top:1em}
    img {max-width: 100%;border:none;height: auto !important;}
    .images span {display: inline-block;overflow:hidden;text-align:center;}
    .images .tall {width:32.4%;max-width:400px; height:auto; vertical-align:top;}
    img.tall {width:320px;height:468px;}
    #bottomBorder {padding-bottom: 0.5em; border-bottom: #fc6 solid 1em;}
    .picleft{border:0;float:left;}
    .picright{border:0;float:right;}
    .bi{font-weight:bold;}
    .updatetop{padding:.3em;margin-top:1em;background-color:#F5EBD6;color:Black;font:bold 1.4em 
    "Times New Roman",Times,serif;}
    #measure{padding:.3em .3em .3em;clear:left;margin-top:1em;background-color:#F5EBD6;color:Black;font:bold 1.4em "Times New Roman",Times,serif;}
    h3{display:block;padding:.3em;margin:.4em 0 .6em 0;background-color:#F5EBD6;color:Black;font:1.3em 
    "Times New Roman",Times,serif;}
    a.sr:link{color:#00f;background-color:#F5EBD6;text-decoration:none;font-size:1.1em;}
    a.sr:visited{color:#00f;background-color:#F5EBD6;text-decoration:none;font-size:1.1em;}
    #updatepub{padding:.3em;margin:1em 0;background-color:#F5EBD6;color:Black;font:bold 1.4em 
    "Times New Roman",Times,serif;}
    .x12{font-size:1em;}
    .articlesub{font:1.1em Verdana,Tahoma,Helvetica,sans-serif;}
    a.main:link{color:#D2691E;text-decoration:underline;background-color:#fff;}
    a.main:visited{color:#8B0000;text-decoration:underline;background-color:#fff;}
    a.main:hover{color:red;text-decoration:underline;background-color:#fff;}
    h1{display:block;font:bold 1.1em Verdana,Tahoma,Helvetica,sans-serif;color:#666666;
    padding:0.2em 12px 0.35em;  margin-bottom:0.5em;margin-top:4%;float:right;}
    div.cl ul {list-style-type:none;line-height:1.3;}
    div.cl{clear:both;margin-top:.4em;}
    #s3{font-size:.8em;font-weight:bold;text-align:center;}
    #s2{font-size:.72em;text-align:center;}
    .book{margin-left:auto;margin-right:auto;}
    .book img{border:0;vertical-align:bottom;}
    .bookleft{border:0;margin-right:6%;}
    .bookright{border:0;margin-left:6%;}
    .book1{margin-top:1.8em;}
    .book1 img{border:0;vertical-align:bottom;}
    .bookleft2{border:0;margin-right:3%;margin-left:9%;}
    .bookright2{border:0;margin-left:3%;}
    p.largecat a#burn {color:#00f;background-color:#fff;text-decoration:underline}
    a.ct:link{color:#00f;text-decoration:none;background-color:#fff;}
    a.ct:visited{color:#8B0000;text-decoration:none;background-color:#fff;}
    a.ct:hover{color:red;text-decoration:none;background-color:#fff;}
    
    @media only screen and (max-width:1030px) {
    body{padding:0 45px}}
    
    @media only screen and (max-width:900px) {
    .hide {display:none;}}
    
    @media only screen and (max-width:700px) {
    images {text-align:center}
    body{padding:0 15px}
    .hpic1 { display:none; }
    .images .tall {
    	width:48%;
    	max-width:400px;
    	height:auto;
    	vertical-align:top;
    	margin:0 4px;}}
    
    @media only screen and (max-width:465px) {
    body{padding:0 5px}
    .hpic2 { display:none; }
    .images .tall {
    	width: 70%;
    	max-width:400px;
    	height:auto;
    	vertical-align:top;
    	float:none;}}
    One possible culprit for the margin issue in Chrome is
    Code:
    @media only screen and (max-width:1030px) {
    body{padding:0 45px}}
    Additional margins for content is styled by
    Code:
    #format{width:80%;word-spacing:-.1em;margin-left:auto; margin-right:auto;}
    I don't want to change anything that would affect the appearance in FF and IE11. I hope to find a fix for the Chrome appearance.
    Thanks in advance to the CSS experts.

  2. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The home page has a max-width of 980px. All other pages have a percentage width around 90%. Try changing one or other to bring them into line.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Allan:
    This is the style sheet for only one page, the home page. There are no other pages using this style sheet.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by cma6 View Post
    Allan:
    This is the style sheet for only one page, the home page. There are no other pages using this style sheet.
    The point still stands: you have a max width set on the body element that is causing the issue.

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I commented out "max-width:980px;", the page looks the same in FF. However, in Chrome, there is no left margin at all; in IE there are no margins. I suppose that "max-width:980px;" is necessary to make the design work in Chrome and IE11 and I will have to live with the look in Chrome.
    Thanks to the commenters for their ideas.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by cma6 View Post
    When I commented out "max-width:980px;", the page looks the same in FF. However, in Chrome, there is no left margin at all; in IE there are no margins. I suppose that "max-width:980px;" is necessary to make the design work in Chrome and IE11 and I will have to live with the look in Chrome.
    Thanks to the commenters for their ideas.
    No, Chrome works the same way the other browsers do. You'll need to replace the max-width with something, like width: 80%.

    It's not a good idea to use a completely different style sheet for the home page. Use your main site style sheet, and if there are some special styles for the home page, just target the special elements with a class or ID etc.

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to all the posters for the tips.


Bookmarks

Posting Permissions

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