...

View Full Version : Is my CSS overriding something else?



DesignNovice
02-15-2011, 06:06 PM
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:



*
{
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:



.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

Kristofa
02-15-2011, 10:42 PM
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?

teedoff
02-15-2011, 11:49 PM
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.

DesignNovice
02-16-2011, 09:44 AM
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:
http://taylor-made-marketing.co.uk/defaultcss.jpg

Screenshot of page with image viewer stylesheet:
http://taylor-made-marketing.co.uk/imageviewercss.jpg

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.

Excavator
02-16-2011, 05:19 PM
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 -

.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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum