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 8 of 8
  1. #1
    Senior Member
    Join Date
    Jan 2011
    Posts
    148
    Member #
    26229
    Liked
    1 times
    Hello there, I'm building a page for a friends on-line jewellery business and could do with a little help on an overlay issue I've been having.

    The overlay on the below page it attached to the left hand images on the top row and and works in everything except IE

    http://www.ddvdesigns.com/bracelets.html

    I've tried adding <!DOCType html> to the top of the page and this works, in that the overlay appears however it renders all the css styling on the page useless and ruins the layout of the page.

    Any help anyone can offer on this would be greatly appreciated, can send you the files in a zip if anyone want to take a look.

    Thanks!
    John

  2.  

  3. #2
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Actually, it is better to post the link to the site - few people want to open a file from someone they don't know personally.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  4. #3
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    The proper doc type declaration would be something like:

    [COLOR=rgb(0, 128, 128)]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/COLOR]

    [COLOR=rgb(0, 0, 0)]and yes...IE behaves better if you declare a doc type... there are others.. but strict can break a lot of things if your css is not perfectly structured.[/COLOR]

    [COLOR=rgb(0, 0, 0)]not sure what you mean by overlay issue... as I'm seeing the same thing in Chrome and IE ???[/COLOR]

  5. #4
    Senior Member
    Join Date
    Jan 2011
    Posts
    148
    Member #
    26229
    Liked
    1 times
    Hey, thanks for getting back to me on this, I've added the doc type you suggested by as before it's thrown my CSS completely out.
    When you say my CSS needs to be perfectly structured what kind of things do you mean? is there a rule of thumb for spacing or something I need to follow? there's quite a bit on there and it's grown as you'd expect as the site has become more complicated.
    Quite frustrating!
    Strange, I've just checked Chrome and the overlay is coming up OK?

  6. #5
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by JONNYB, post: 213721
    Hey, thanks for getting back to me on this, I've added the doc type you suggested by as before it's thrown my CSS completely out.
    When you say my CSS needs to be perfectly structured what kind of things do you mean? is there a rule of thumb for spacing or something I need to follow? there's quite a bit on there and it's grown as you'd expect as the site has become more complicated.
    Quite frustrating!
    Strange, I've just checked Chrome and the overlay is coming up OK?
    I think what Webzarus means (and please correct me if I'm wrong, Webz) by structuring your CSS is that you need to understand that it is read from top to bottom. If you add something to the bottom that contradicts or counteracts what came before it will overwrite the earlier style as the CSS file is read by the browser, and you will have the later style in the final display.
    So you have to be very careful where you add anything new.
    Most really long CSS files are structured so they reflect the layout of the page - often with comments
    separating the sections.
    For example:

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    /*The goal of a reset stylesheet is to reduce browser inconsistencies in things like
    default line heights, margins and font sizes of headings, and so on.*/
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td{ margin:0;  padding:0;  border:0;  outline:0;  font-size:100%;  vertical-align:baseline;  background:transparent}
    body{line-height:1}
    ol, ul{list-style:none}
    blockquote, q{quotes:none}
    blockquote:before, blockquote:after,
    q:before, q:after{ content:'';  content:none}
    /* remember to define focus styles! */
    :focus{outline:0}
    /* remember to highlight inserts somehow! */
    ins{ text-decoration:none}
    del{text-decoration:line-through}
    /* tables still need 'cellspacing="0"' in the markup */
    table{ border-collapse:collapse;  border-spacing:0}
     
    
    /* Layout-Specific Styles ==============================    */
    body{background:url(images/body.jpg) repeat}
    .clear-block{ display:block; clear:both}
    .top-bar{ background:url(images/top-bar.jpg) repeat top center; height:9px}
    #container{ width:960px; margin:0 auto; background:url(images/glow.jpg) top center no-repeat; padding-top:25px}
    p.view-more{margin-top:10px}
    p.view-more a{ text-decoration:none; font-family:Georgia,Palatino,serif; font-size:10px; text-transform:uppercase; letter-spacing:1.5px; background:url(images/read-more.jpg) no-repeat center;  color:#b3b496;  padding:7px 22px}
    p.view-more a:hover{color:#E8D4AF}
    hr{background:none;  border-top:1px dotted #5b5a4e;  border-left:none;  border-right:none;  border-bottom:1px dotted #8a8571;  margin:15px 0}
    a{color:#a2ccd0;  text-decoration:none}
    a:hover{color:#badee1}
    
    
    /* Header ==============================    */
    #header{margin-bottom:20px}
    h1.site-logo a{ background:url(images/logo.png) no-repeat;  display:block;  height:0 !important;  overflow:hidden !important;  padding-top:94px;  width:290px;  margin:0 auto 10px auto}
    
    
    /* Navigation and Search ==============================    */
    #navigation{ background:url(images/navigation.jpg) no-repeat top center; height:52px; padding:28px 0 0 0}
    #navigation li{ float:left; margin-right:5px}
    #navigation a{ color:#e8d4af; text-decoration:none; font-family:Georgia,Palatino,serif; font-size:10px; text-transform:uppercase; letter-spacing:1.5px; height:19px; width:81px; display:block; text-align:center; padding-top:8px}
    #navigation a:hover,
    #navigation a.active{background:url(images/navigation-hover.jpg)}
    #navigation .search{float:right}
    #navigation .search input.form-text{ background:url(images/form-text.jpg) repeat-x; color:#5b5a4e; font-family:arial,verdana,sans-serif; font-size:11px; border:none; -moz-border-radius:5px; -webkit-border-radius:5px; padding:6px 10px}
    #navigation .search input.form-submit{ text-decoration:none; font-family:Georgia,Palatino,serif; font-size:10px; text-transform:uppercase; letter-spacing:1.5px; height:27px; width:81px;   text-align:center; border:none; background:url(images/navigation-hover.jpg) no-repeat;  color:#b3b496}
    #navigation .search input.form-submit:hover{cursor:pointer;  color:#E8D4AF}
    
    
    /*Contents ==============================    */
    #contents h3{ color:#b3b496; font-family:Georgia,Palatino,serif; font-size:10px; text-transform:uppercase; letter-spacing:1.5px; margin:10px 0; font-weight:normal}
    #contents h1.page-title{ font-weight:normal; color:#d1a773; font-family:Georgia,Palatino,serif;  font-size:50px}
    #contents h1 a:hover{color:#badee1}
    #contents p.subhead{ color:#e8d4af; font-size:16px; font-family:Georgia,Palatino,serif; margin:5px 0 15px 0; line-height:20px}
    #contents h2{ color:#E8D4AF; font-family:Georgia,Palatino,serif; font-size:24px; font-weight:normal; letter-spacing:1px; line-height:20px; margin:0 0 10px}
    #contents p, #contents li{ color:#f4e6cc; font-size:11px; font-family:arial,verdana,sans-serif; line-height:15px; margin-bottom:15px}
    #contents ul li{ margin-left:30px; list-style:square; margin-bottom:5px}
    #contents ol li{ margin-left:30px; list-style:decimal; margin-bottom:5px}
    #contents img{border:5px solid #454439}
    #contents img.img-right{ margin:0 0 5px 20px; float:right}
    #contents img.img-left{ margin:0 20px 5px 0; float:left}
    #contents .column-1{ width:460px; float:left; margin-top:15px}
    #contents .column-2{ width:460px; float:right; margin-top:15px}
    #contents .item{ border-bottom:1px dotted #8A8571; float:left; margin-bottom:20px; padding-bottom:15px}
    #contents ul,
    #contents ol{margin-bottom:20px}
    
    
    /*Contact Form ==============================    */
    .submitted{ font-style:italic; font-size:10px}
    .contact-form{padding-top:10px}
    .contact-form label{ width:40px; float:left; margin-top:5px}
    .contact-form textarea{ height:100px; width:400px; margin-top:5px}
    .contact-form input{ background:url(images/form-text.jpg) repeat-x; color:#5b5a4e; font-family:arial,verdana,sans-serif; font-size:11px; border:none; -moz-border-radius:5px; -webkit-border-radius:5px; padding:6px 10px}
    .contact-form textarea{ background:url(images/form-text.jpg) repeat-x bottom #f0e4c5; color:#5b5a4e; font-family:arial,verdana,sans-serif; font-size:11px; border:none; -moz-border-radius:5px; -webkit-border-radius:5px; padding:6px 10px}
    .contact-form input.submit-button{ text-decoration:none; font-family:Georgia,Palatino,serif; font-size:10px; text-transform:uppercase; letter-spacing:1.5px; height:27px; width:81px;   text-align:center; border:none; background:url(images/navigation-hover.jpg) no-repeat;  color:#b3b496}
    .contact-form input.submit-button:hover{cursor:pointer;  color:#E8D4AF}
    
    /*Footer ==============================    */
    #footer{ background:#CCC no-repeat; outline:1px solid red;}
    #copyright{ text-align:center; padding:22px 0px 30px 00px; font-size:0.8em; color:#464544;}
    
    /*Bottom Container ==============================    */
    #bottom-container{ background:url(images/bottom.jpg) repeat-x;  margin-top:30px;  border-bottom:1px dotted #8a8571}
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  7. #6
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    That's a really good point... and something that needs saying every so often when people are not familiar with CSS and how it works...

    good point about breaking your CSS into chunks ( based on structure)...and labeling... I used to do that... and still do if I know the code is going to someone else... if It's staying with me... I keep the commented CSS on the test server... and optimize the one that gets pushed to the server.

    I use a simple ASP script on my test server that strips out comments and white space in the CSS.

    My comment about strict mode was actually meant about the doc type... if you use the DTD of strict ([COLOR=rgb(0, 128, 128)][COLOR=rgb(0, 0, 0)]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/COLOR][/COLOR]) , some css elements that work properly and validate under the transitional DTD will not validate properly... and could possibly throw the browser into Quirk mode... and revert to old style rendering... IE is the worst for this... but if you know it going in.. not a problem...

    If I remember correctly... you can't use ANY css inline styling when you declare strict... and the most common thing that I hear about IE not displaying images correctly can usually be attributed to the fact that if you don't declare any doc type or try to use the strict type and the code is so far from validation... the browser automatically goes into quirk mode and starts rendering at IE4 standards... which is what they see and why they complain that IE is not displaying their images correctly.

  8. #7
    Senior Member
    Join Date
    Jan 2011
    Posts
    148
    Member #
    26229
    Liked
    1 times
    Hey both,

    Thanks for getting back to me both of you,

    So as you've probably noticed I am not an expert in code, more of a designer.

    So whilst I kind of understand what you're saying I'm a bit stuck on how I actualy start rectifying the problem.

    Shout I start re writing my CSS?

    @Alphamare - if I e-mailed you the css file would you take a quick look and give me some pointers.

    Just to say that I do appreciate all the help I get on here, I am learning a huge amount every week and it is all down to the generosity of the people on this forum

  9. #8
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by JONNYB, post: 213885
    @Alphamare - if I e-mailed you the css file would you take a quick look and give me some pointers.
    Just looking at the CSS without the HTML is not going to be very helpful. The whole point I was trying to make is that the CSS and HTML are interdependent, and in order for that to work properly, you need to understand how the browsers interpret them.

    I am in a project right now that is taking all my time and then some - I'll take a look at your code from the site when I have a moment and get back to you as soon as I can.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!


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 10:31 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com