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

    Is my CSS overriding something else?

    Hi everyone,

    I'm wondering if anyone can help me. I'm trying to use the Plus Size Image Viewer code and I think something in my CSS is overriding the CSS that came with the file.

    This is my CSS:

    Code:
    *
    {
    padding: 0em;
    margin: 0em;
    }
    
    body
    {
    background: #000000 url('images/bg1.jpg');
    padding: 35px 0px 35px 0px;
    }
    
    body,input
    {
    font-size: 10pt;
    font-family: "georgia", "times new roman", serif;
    color: #333333;
    }
    
    p
    {
    line-height: 1.5em;
    margin-bottom: 1.0em;
    text-align: justify;
    }
    
    a
    {
    color: #B96D00;
    text-decoration: underline;
    }
    
    a:hover
    {
    text-decoration: none;
    }
    
    
    h3 span
    {
    font-weight: normal;
    }
    
    h3,h4
    {
    display: inline;
    font-weight: bold;
    background-repeat: no-repeat;
    background-position: right;
    }
    
    h3
    {
    font-size: 1.7em;
    padding-right: 34px;
    background-image: url('images/db1.gif');
    }
    
    h4
    {
    font-size: 1.2em;
    padding-right: 28px;
    background-image: url('images/db2.gif');
    }
    
    .contentarea
    {
    padding-top: 1.3em;
    }
    
    img
    {
    border: solid 1px #6F5230;
    }
    
    img.left
    {
    position: relative;
    float: left;
    margin: 0em 1.8em 1.4em 0em;
    }
    
    img.right
    {
    position: relative;
    float: right;
    margin: 0em 0em 1.8em 1.8em;
    }
    
    .divider1
    {
    position: relative;
    background: #fff url('images/border2.gif') repeat-x;
    height: 14px;
    margin: 2.0em 0em 1.5em 0em;
    clear: both;
    }
    
    .divider2
    {
    position: relative;
    height: 1px;
    border-bottom: solid 1px #eaeaea;
    margin: 2.0em 0em 2.0em 0em;
    }
    
    .post .details
    {
    position: relative;
    top: -1.5em;
    font-size: 0.8em;
    color: #787878;
    }
    
    .post ul.controls
    {
    clear: both;
    }
    
    .post ul.controls li
    {
    display: inline;
    font-size: 0.8em;
    }
    
    .post ul.controls li a
    {
    background-repeat: no-repeat;
    background-position: left;
    padding: 0em 1.0em 0em 20px;
    }
    
    .post ul.controls li a.printerfriendly
    {
    background-image: url('images/icon-printerfriendly.gif');
    }
    
    .post ul.controls li a.comments
    {
    background-image: url('images/icon-comments.gif');
    }
    
    .post ul.controls li a.more
    {
    background-image: url('images/icon-more.gif');
    }
    
    .box
    {
    position: relative;
    background: #FDFCF6 url('images/boxbg.gif') repeat-x;
    left: -1.5em;
    top: -1.5em;
    padding: 1.5em;
    border-bottom: solid 1px #E1D2BD;
    margin-bottom: 1.0em;
    }
    
    ul.linklist
    {
    list-style: none;
    }
    
    ul.linklist li
    {
    line-height: 2.0em;
    }
    
    #upbg
    {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 275px;
    background: #fff url('images/bg2.jpg') repeat-x;
    z-index: 1;
    }
    
    #outer
    {
    z-index: 2;
    position: relative;
    width: 82%;
    border: solid 7px #fff;
    background-color: #fff;
    margin: 0 auto;
    }
    
    #header
    {
    position: relative;
    width: 100%;
    height: 9.0em;
    background: #2B2B2B url('images/topbg.gif') repeat-x;
    margin-bottom: 2px;
    }
    
    #headercontent
    {
    position: absolute;
    bottom: 0em;
    padding: 0em 2.0em 1.3em 2.0em;
    }
    
    #headercontent h1
    {
    font-weight: normal;
    color: #fff;
    font-size: 2.5em;
    }
    
    #headercontent h1 sup
    {
    color: #777;
    }
    
    #headercontent h2
    {
    font-size: 1.0em;
    font-weight: normal;
    color: #aaa;
    }
    
    #headerpic
    {
    position: relative;
    height: 109px;
    background: #fff url('images/hdrpic.jpg') no-repeat top left;
    margin-bottom: 2px;
    }
    
    #menu
    {
    position: relative;
    background: #7F8400 url('images/menubg.gif') repeat-x top left;
    height: 3.5em;
    padding: 0em 1.0em 0em 1.0em;
    margin-bottom: 2px;
    }
    
    #menu ul
    {
    position: absolute;
    top: 1.1em;
    }
    
    #menu ul li
    {
    position: relative;
    display: inline;
    }
    
    #menu ul li a
    {
    padding: 0.5em 1.0em 0.9em 1.0em;
    color: #fff;
    text-decoration: none;
    }
    
    #menu ul li a:hover
    {
    text-decoration: underline;
    }
    
    #menu ul li a.active
    {
    background: #7F8400 url('images/menuactive.gif') repeat-x top left;
    }
    
    #menubottom
    {
    background: #fff url('images/border1.gif') repeat-x;
    height: 14px;
    margin-bottom: 1.5em;
    }
    
    #content
    {
    padding: 0em 2.0em 0em 2.0em;
    }
    
    #primarycontainer
    {
    float: left;
    margin-right: -18.0em;
    width: 100%;
    }
    
    #primarycontent
    {
    margin: 1.5em 22.0em 0em 0em;
    }
    
    #secondarycontent
    {
    margin-top: 1.5em;
    float: right;
    width: 18.0em;
    }
    
    #footer
    {
    position: relative;
    height: 2.0em;
    clear: both;
    padding-top: 5.0em;
    background: #fff url('images/border2.gif') repeat-x 0em 2.5em;
    font-size: 0.8em;
    }
    
    #footer .left
    {
    position: absolute;
    left: 2.0em;
    bottom: 1.2em;
    }
    
    #footer .right
    {
    position: absolute;
    right: 2.0em;
    bottom: 1.2em;
    }

    And this is the CSS that came the Image Viewer:


    Code:
    .enlargecaption{
    position: absolute;
    border: 1px dotted navy;
    font: normal 11px Arial;
    }
    
    .enlargecaption a{
    display:block;
    background: lightblue; /*bg color of caption*/
    padding: 3px;
    text-decoration: none;
    color: black;
    }
    
    .enlargecaption a:hover{
     background: lightyellow; /*bg color of caption when mouse rolls over it*/
    }
    
    .enlargebox{
    position: absolute;
    border:1px solid gray;
    display:none;
    }
    
    .enlargebox .title{
    background:gray;
    color:white;
    padding: 3px 2px;
    text-align: right;
    font:bold 14px Arial;
    }
    
    .enlargebox .title img{
    cursor:pointer;
    cursor:hand;
    }

    Any help would be so very much appreciated, this has been driviing me crazy for hours!

    Nikki
    Last edited by DesignNovice; 02-16-2011 at 09:46 AM. Reason: Wrapped CSS in code tags

  • #2
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts
    That's a whole lot of CSS...

    Why do you think something is overriding something else - what's the problem? Can you post a screenshot?
    Learning along the way...

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Well its hard to guess if your css is overriding anything of you dont post all your html and all your css. Better would be a link to your site.

    When posting code please use the # button to wrap your code in tags.
    Teed

  • #4
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, that was quite stupid really.

    There is supposed to be "View Full Image" written in the bottom left hand corner of my images.

    When I use my stylesheet - the top one, it doesn't show.

    When I use the image viewer stylesheet - the bottom one, it does show but obviously my page has no styling.

    I can't post a link as it's not live yet - and I'm embarrassed of my page.

    Screenshot of section of page with my stylesheet:


    Screenshot of page with image viewer stylesheet:


    When I merge the two files and just have one style sheet, it shows up like the first ss, which I why I wonder if something in my default style sheet is overriding something in my image viewer style sheet.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello DesignNovice,
    Without a link it's really impossible to tell what's going on and where your "View Full Image" box is going.

    It may be that your other CSS is making an element postition: relative; that does not work with the way you have .enlargebox absolutely positioned. Normally when you use absolute positioning, you supply top and left coordinates for it to be positioned to.

    Again, without seeing your markup I can only guess that .enlargebox is actually the missing element.

    Try this once -
    Code:
    .enlargebox {
    	position: absolute;
    top: 100px;
    left: 100px;
    	border:1px solid gray;
    	display:none;
    }
    That will put .enlargbox 100px down and to the right of the topleft corner of it's container. After that, it must be getting a size from something else? It must be getting that display: none; changed to display: block; by something you have not shown us as well.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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