SitePoint Sponsor

User Tag List

Page 1 of 4 1234 LastLast
Results 1 to 25 of 84
  1. #1
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Help with CSS issue

    Hello,
    I have been following the CSS3 Live course for the past 2 weeks and just finished it today. It was excellent.

    I have moved on to making a site for a birding group locally and hope to use some of the new techniques I have learned.

    I have not done any web design in along time and seem to have forgotten some of it and cannot figure bits out.

    I hope you guys can give me a helping hand into fixing bits where I have become stuck.

    The site is currently at http://log.neiltonge.co.uk

    1.) Why does the site look entirely different in Opera and Firefox than it does in Chrome?

    2.) How do I use SVG fo the gradiented background in Opera?

    3.) What is the best approach to making the logo at the top left?, I am havinga horrendous time with it at the moment.

    4.) Why, in chrome, are the tops of the list items going above the bottom of the logo outline?

    Also, why, when I give the section with an id of content a top: 2em; statement, does it not move at all?

    I know some of these questions may sound simple or even stupid but I hope my knowledge will come back to me when I can see correct and clear solutions.

    Thanks

    Neil

  2. #2
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please can someone give me a hand here

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    There's no doctype, just this <!doctype> . So you are triggering quirks mode, and that differs in lots of browsers.

    Try this doctype

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  4. #4
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It should be the html 5 doctype, which admittedly I had specified incorrectly but have fixed that now. It still has a ton of problems though

    Another issue cropped up when i corrected the doctype.

    I have specified a css3 gradient, (only for webkit so far) and it only occupies a small proportion of the top of the page and then white for the rest of the way. Why is this? This is happening in chrome.

    In chrome, the nav element has cleared the floats and is directly beneath the floats but how can I pull it down to be at the top of the section below?

    Also, The link tab things that I have made, why does the top padding go outside of the nav border (blue line)? Shouldn't this go around the padding of each link?

  5. #5
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I really need some good solid advice in here about these issues.

    Please can some people help.

    Thanks

    Neil

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,477
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The first thing you need to do is declare the html 5 elements as display:block because browsers haven't caught up with the new elements as yet and will not have the default applied.

    Code:
    header,nav,section{display:block}
    That should sort out a number of issues straight away.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,477
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    2) You can find some examples here that should help:

    http://www.display-inline.fr/project...9cc&extOpera=1

    http://css-tricks.com/css3-gradients/

    3) I'm not sure what you are asking exactly What do you want to do with the logo?

    4) Latest versions of Chrome and Safari look the same to me.


    5) top:2em will do nothing unless you define a positioning system for it. Did you mean margin-top:2em?

    e.g.

    Code:
    #content {
      display:block;
     margin-top:2em;
    }

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,477
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You'll also need the fix for IE to recognise the html5 elements.

    http://code.google.com/p/html5shiv/

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,477
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Dr John View Post
    There's no doctype, just this <!doctype> . So you are triggering quirks mode, and that differs in lots of browsers.
    That's the html5 doctype and does not trigger quirks mode in any browsers.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,477
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Whoops I edited your post instead of replying to it - sorry.

    This was supposed to be my reply.

    I'm just a bit confused as to why the CSS webkit gradient does not extend all the way to the bottom fo the page in Chrome.
    Try setting html and body to 100% height.
    Code:
    html,body{height:100%}
    --Basically, the logo, I am trying to find the best way of having an h1 element with a background image, but the background is larger than the text and the text needs to be positioned pretty much centrally (vertically and horizontally) maybe offset a little in one direction or another.
    Well you can just size the h1 to be the exact size you want using width and height. If you want the text vertical and horizontal within that h1 then just use text-align:center and set the line-height to the same vale as the height and the text will be vertically centred. Or instead of text-align:center you could use text-indent to move the text exactly where you want it.

    Code:
    h1{
    margin:0;
    width:150px;
    height:50px;
    text-align:center;
    line-height:50px;
    }




    --So adding this allows those new elements to work in IE?
    It will allow IE you to style them in IE yes.

    How can I get the nav element to be pulled down to be directly ontop of the box below it?
    Remove the height from the header and then the nav will sit on top of the content by default.

    If you wanted the nav moved down a bit first then apply a margin bottom to the logo that is above it -but you wuld need the logo floated an not absolutely positioned.

    Code:
    #logo h1 {
        font-size: 25pt;
        text-shadow:2px 2px 2px #333333;
        border: 1px solid yellow;
        margin:40px 0 2em 40px;
        float:left;
        width:200px;
        height:50px;
        text-align:center;
        line-height:50px;
    }

  11. #11
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks,
    I'll give all that a go.

    I have just tried the gradient solution, and yes, it pulls the gradient down a bit more but if you scroll down the page a bit, there is a patch of white under the bottom of the screen.

    I shall keep updating this post with issues when they occur in reference to your post.

    Thanks
    Neil

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,477
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Yes safari is being a it awkward but it's just a matter of findng something that it likes.

    This seems to work for me.

    Code:
    html{height:100&#37;}
    body{min-height:100%}
    html {
        background-color: #2F65A6;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F65A6), to(#6EAAD9));
        background-repeat: no-repeat;
    }
    body {
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F65A6), to(#6EAAD9));
        background-repeat: no-repeat;
        padding:0 2em;
        font-family: arial, sans-serif;
    }
    #container {
        width: 960px;
        border: solid 0px black;
        margin:0 auto;
        padding:1em 0;
    }

  13. #13
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,

    I have continued work on the website I was developing the other week. I ahve overcome a few issues and come across others which I hope you can help me with.

    The latest version of the site is at the same address as at the top of this thread.

    Now then:

    1.) Are text-shadows available in IE 9 Beta? as my current text shadow on the title does not seem to work in the beta

    2.) What's the standard CSS 3 code for gradients as I cannot seem to get those working in Ie 9 Beta either (Currently done with a small repeating image to work with IE6, 7 and 8

    3.) In Firefox, Chrome and Safari, if you scroll down the site, there is now a band of dark blue, same as the dark blue from the top of the page. I have no idea how to fix this?

    4.) In IE7, the links have moved up from the content division. How can I fix this so they are the same as they are in the modern browsers?

    5.) How can I centre the Google calendar on the "Meetings" page?

    Thanks

    Neil

  14. #14
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    More:

    6.) In IE7 why is the tagline left aligned instead of right aligned like in other browsers?

    7.) Why, when viewing an iphone, is the left hand side of the site cut off?

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,477
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rctneil View Post
    1.) Are text-shadows available in IE 9 Beta? as my current text shadow on the title does not seem to work in the beta
    I don't believe they are available in IE9 beta but there's no news that I can see about the real IE9 supporting them.

    You can find a list of currently supported ie9 features here:

    http://msdn.microsoft.com/en-us/ie/ff468705.aspx

    There is also a useful site here to keep track of who does what.:

    http://caniuse.com/


    2.) What's the standard CSS 3 code for gradients as I cannot seem to get those working in Ie 9 Beta either (Currently done with a small repeating image to work with IE6, 7 and 8
    There is only a proposal at present so I don't think IE9 will support it. You can use the old IE filters to get something similar.

    http://www.zetalight.com/css3-shadow...-css3-support/

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,477
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rctneil View Post
    Hey Paul,

    3.) In Firefox, Chrome and Safari, if you scroll down the site, there is now a band of dark blue, same as the dark blue from the top of the page. I have no idea how to fix this?
    That's because you didn't implement the fixes I gave you in post #12. You can't set height:100% and min-height:100% at the same time as that means height:100% only. You cant add padding to a 100% high element either. All these fixes were rolled into my answer in post #12.

    Here is the code revised to your new specifications:

    Code:
    html{height:100%}
    body{min-height:100%}
    html {
        background-image: url('http://log.neiltonge.co.uk/img/bg_grad.png');
        background-repeat: repeat-x;
        background-color: #6EABD9; /* #2F65A6 */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0.15, rgb(47,100,166)), color-stop(0.58, rgb(110,171,217)));
        background: -moz-linear-gradient(center top, rgb(47,100,166) 15%, rgb(110,171,217) 58%);
    }
    body {
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0.15, rgb(47,100,166)), color-stop(0.58, rgb(110,171,217)));
        background: -moz-linear-gradient(center top, rgb(47,100,166) 15%, rgb(110,171,217) 58%);
        padding:0 2em;
        font-family: arial, sans-serif;
    
        text-align: justify;
    }
    #container {
        width: 960px;
        margin-left: auto;
        margin-right: auto;
        padding:2em 0;
    }

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,477
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rctneil View Post

    4.) In IE7, the links have moved up from the content division. How can I fix this so they are the same as they are in the modern browsers?
    Seems to be the same in IE8 also and is linked to Dean Edwards script which seems to be adding default margins to the html5 elements.

    Try this:

    Code:
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
        display: block;
    margin:0;
    }

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,477
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rctneil View Post
    More:

    6.) In IE7 why is the tagline left aligned instead of right aligned like in other browsers?
    Because you have used a hacky way to align it anyway

    Just clear the float above and use normal margins.

    Code:
     header p:nth-of-type(2) {
    float: right;
    margin:10px 90px 0 0;
    clear:right;
    font-size: 10pt;
    color: white;
    white-space:nowrap;
    }

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,477
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rctneil View Post

    5.) How can I centre the Google calendar on the "Meetings" page?

    Thanks

    Neil

    Set the iframe to display:block and the margin:auto will take effect.
    Code:
    iframe {
    border:1px solid black;
    display:block;
    height:450px;
    margin-left:auto;
    margin-right:auto;
    width:800px;
    
    
    }
    Sorry about the multiple replies but you asked a lot of questions for one sitting

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,477
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rctneil View Post

    7.) Why, when viewing an iphone, is the left hand side of the site cut off?
    I don't own an iphone but the safari sdk iphone emulator shows it rendering ok.

  21. #21
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers for all of that Paul, I'll run through all your posts again a bit later once I have completed todays smaller and more boring tasks and see how it goes.

    You are a very useful person to have around!

    Thanks so much. I'll report back on how it all goes.

    Thanks

    Neil

  22. #22
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right, here we go again,

    I have run through each of your answers:

    I have got the blue band at the bottom solved by following your code snippet. What I would like to understand is, HOW is it exactly fixing it?

    Why are the gradients specified twice?

    The margin: 0; on html 5 elements fixes the error in IE& and 8 perfectly. Thanks

    I have redone the tag line code to how you suggested, but in IE6, both the left hand image and both of the right floated <p>'s move towards each other?. Any ideas?

    What png fix would you reccomend?

    Google Calendar is now centred. Thanks

    In regards to the issue on iphone. It also happens when you simulate it in Safari.

    1. Simulate in safari
    2. Set the width to be standard smartphone width. and scroll to the right.

    The right hand edge of the content division is hard up against the edge of the browser window. The shadow goes on beyond the edge. Why is it doing that on the right hand edge but not on the left? How can this be fixed? Can some padding or margins be added left and right to fix it or not?

    Think that's all for now.

    Sorry for all the questions but it is helping me learn how to fix these little issues.

    Appreciate your help and time.

    How did you know to set the body to min height and html to height and nto the other way round? Is there a specific reason for this?

    If you give padding two values, is it the first one that does top and bottom?

    Also, now that issue is fixed, another occurs when moving from short pages to longer ones when the right hand scrollbar is introduced.

  23. #23
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    I'll answer a few questions since I have a bit of time.
    Quote Originally Posted by rctneil View Post


    What png fix would you reccomend?
    Twinhelix PNG fix

    If you give padding two values, is it the first one that does top and bottom?
    Padding: 4px 10px

    That is the equivalent of
    padding-top:4px;
    padding-bottom:4px;
    padding-right:10px
    padding-left:10px

    So in short, it's top/bottom and then right/left

    3 values is top then right/left and hten bottom
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  24. #24
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,477
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rctneil View Post
    Right, here we go again,

    I have run through each of your answers:

    I have got the blue band at the bottom solved by following your code snippet. What I would like to understand is, HOW is it exactly fixing it?
    I removed the padding from the body as that was making it 100% + 2em padding which is too big and gave you the scrollbar.

    Then I made html 100% high but the body was made min-height:100% so that it could expand.

    Why are the gradients specified twice?
    This was to get over the safari bug as it was stopping at 100% so I used the html element to get the initial 100% and then repeated it on the body so that when the page grows the background grows as well.

    When you use only the body element it automatically gets propagated to the html element which means that usually you should never need to apply styles to the html element. However, when you do apply a background to the html element then the body element shrinks to have no height. The combination I came up with was the only one that satisfied safari and probably a result of the way the filter was used as usually you don;t have to do that.

    The margin: 0; on html 5 elements fixes the error in IE& and 8 perfectly. Thanks
    Yes I haven't come across that bug before and I don't know what Dean Edwards script is doing but perhaps it decides that html5 elements should have margins like h1 and p etc.

    These bugs are easily found if you follow my reduce down debugging system. When the bug isn't obvious I eliminate sections of code until eventually the bug disappears. I stripped the page down except for one element and it was still different so I started stripping the head content and on removing the script the display clicked back to normal so the culprit was found.

    I have redone the tag line code to how you suggested, but in IE6, both the left hand image and both of the right floated <p>'s move towards each other?. Any ideas?
    Add display:inline to the floats as it sounds like the double margin bug.


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
  •