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 13 of 13
  1. #1
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question I have a few issues with my new weblayout, please help?

    Hey there, i started making a new website layout yesterday, i'm a beginner and its my first weblayout...

    hope you like it btw [tell me what you think]. I have some issues with it, like it doesn't show up the

    same way in Intenet Explorer (ie) as in FireFox (FF). And i also need to ask you something about the css

    coding...

    First problem: I set a margin (margin-top) to the header text that says "Blubbz.com" and Internet

    Explorer doesn't seem to read it at all for some reason. But FireFox reads it perfectly. Can i fix that

    somehow? Take a look at the source if you want...? And also... when i asked my friend to look at the

    page, all the transparent pictures on the site, the background shows up as white :S? I wan't it to be

    transparent... look in the screenshots below... (P.S, i saved the pictures as .png files as i know that

    they are good for transparency...)


    My second "problem": I know how to change the style of a class for a link... like:

    .testclass {
    color: FFF;
    text-decoration: none;
    }

    .testclass a:link {
    color: F2F2F2;
    text-decoration: underline;
    }

    That would make it change the color and add a underline when i hover it... But is there a way to style

    it so that i don't have to use two seperate tags (or whatever its called..) like this:

    .testclass a:link, a:visited {
    color: FFF;
    }

    As you can see i used both "a:link" and "a:visited" in the same "tag"... but this doesnt work, well, not

    that way... i know i can do it but i just don't understand how i do it. I hope you get what i mean...


    Screenshots of the page:

    Shot 1: http://e.imagehost.org/0275/pic1.jpg - Taken by my friend. (internet explorer)

    Shot 2: http://e.imagehost.org/0523/pic2.jpg - Taken by me, i want it to look like that!

    Shot 3: http://e.imagehost.org/0758/pic3.jpg - Taken by me, with internet explorer.



    Thanks, Nike

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Can we have a link to your page rather than screen shots?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Kind of stupid of me, sorry i forgot...

    the layout is located at: http://www.blubbz.com/web/index.html

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    First problem: I set a margin (margin-top) to the header text that says "Blubbz.com" and Internet

    Explorer doesn't seem to read it at all for some reason. But FireFox reads it perfectly. Can i fix that

    somehow? Take a look at the source if you want...?
    IE doesn't support fixed positions. So your margin-top: 55px; applied on .header-text is being calculated from the bottom of your top-bar in IE. Just remove that fixed position and other related styles like top,left etc(which has no significance then), and then adjust the margin top value to something like 23px (top-bar would stick at the top automatically!)

    PS: CSS is cascading stylesheet, so there is no need to repeat all styles.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    najkiie (12-09-2008)

  • #5
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    You don't want "a:link" to change the color when it is hovered over. You want "a:hover" for that. You will need two declarations as you have two different things (you want different colors and underlining, right?).
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #6
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thank you, i removed the css as you told me to and its working. But the reason i used the "position: fixed" for the top-bar is becouse i wan'ted it to stay up there even if i scroll further down on the page... And now when i've removed that css it doesn't scroll with the page...? Is there another way to fix that?

    and... *PS: CSS is cascading stylesheet, so there is no need to repeat all styles. *
    what do you mean?


    And the reason why ie didnt read the transparency is becouse it doesn't support transparent .png files (the new version 8 does support it, but 7,6 and older versions doesnt). So if you know some kind of trick to bypass that it would be great. I know it works becouse ive seen it on some sites.

    Thanks again

  • #7
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts
    @jerry62704 yeah i know that... but i don't want to have different colors for ex the "active" state and the "hover" state... those could be the same...

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    and... *PS: CSS is cascading stylesheet, so there is no need to repeat all styles. *
    what do you mean?
    Look at your CSS. You are repeatedly assigning the same properties, (which would inherit by default) on all inner elements, say
    Code:
    font-family:Georgia,"Times New Roman",Times,serif;
    Just apply the above style on your body, and remove all other occurrences of the same. Then, you could apply a different one on a specific inner element, if required.

    There are many more similar cases, like
    Code:
    .menuitem a:link, .menuitem_alink {
    background-position:center;
    background-repeat:repeat-x;
    border-left-width:2px;
    border-right-width:2px;
    color:#FFFFFF;
    float:left;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:11px;
    font-style:normal;
    font-weight:normal;
    height:20px;
    margin-left:15px;
    margin-top:12px;
    padding-left:14px;
    padding-right:11px;
    padding-top:4px;
    text-decoration:none;
    width:auto;
    }
    .menuitem a:link {
    background-position:center;
    background-repeat:repeat-x;
    border-left-width:2px;
    border-right-width:2px;
    color:#FFFFFF;
    float:left;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:11px;
    font-style:normal;
    font-weight:normal;
    height:20px;
    margin-left:15px;
    margin-top:12px;
    padding-left:14px;
    padding-right:11px;
    padding-top:4px;
    text-decoration:none;
    width:auto;
    }
    .menuitem a:visited {
    background-position:center;
    background-repeat:repeat-x;
    border-left-width:2px;
    border-right-width:2px;
    color:#FFFFFF;
    float:left;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:11px;
    font-style:normal;
    font-weight:normal;
    height:20px;
    margin-left:15px;
    margin-top:12px;
    padding-left:14px;
    padding-right:11px;
    padding-top:4px;
    text-decoration:none;
    width:auto;
    }
    .menuitem a:hover, .menuitem a:active, .menuitem_ahover {
    background-position:center;
    background-repeat:repeat-x;
    border-left-width:2px;
    border-right-width:2px;
    color:#BCE4FC;
    float:left;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:11px;
    font-style:normal;
    font-weight:normal;
    height:20px;
    margin-left:15px;
    margin-top:12px;
    padding-left:14px;
    padding-right:11px;
    text-decoration:underline;
    width:auto;
    }
    Select all common rules from the above case and apply them directly on .menuitem a. Then apply the specific rules only on the pseudo elements, like
    Code:
    .menuitem a:link, .menuitem a:visited{text-decoration:none;}
    .menuitem a:hover, .menuitem a:active{text-decoration:underline;}
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Alright, i understand now

    But the top-bar still isnt staying at the top as i would want it to ? I wan't it to be fixed, is there some other way to make it stay there without using the "position: fixed;" method?

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I see it at the top in FF? Which is your browser? You may perhaps need
    Code:
    *{
    margin:0;
    padding:0
    }
    in your CSS.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #11
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Yeah its at the top of the browser... but i want it to stay on top even if i scroll further down on the page... like a toolbar... Even if im at the bottom of the page i want to see it.

  • #12
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Oh.. I see.
    Quote Originally Posted by http://www.quirksmode.org/css/position.html
    position: fixed is not supported by Explorer 6 and lower on Windows; nor by Explorer 7 in Quirks Mode. In Strict Mode Explorer 7 supports it fine, though.
    You may need to use some javascript(or css expression) hacks or "cssplay's fixed" method to get this effect in IE.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #13
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts
    alright, thanks then :P


  •  

    Posting Permissions

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