Board index PBase HTML and Style Sheets Different view in IE

HTML and Style Sheets

Different view in IE

Customize your galleries.
rdavid
 
Posts: 23

Different view in IE

Post Wed Sep 12, 2007 8:57 am


Hello,

I noticed that a page in IE looks different that in Firefox. There are ugly lines around caption at the bottom of a page. Take a look:

Image
The page in IE 6

Image
The page in Firefox 2

Link to original page is http://www.pbase.com/rdavid/image/85191405

What should I fix to have a same Firefox view?

Thanks,
David

alangrant
 
Posts: 861


Post Wed Sep 12, 2007 9:41 am


I am using Firefox 2 and don't see those white lines on your page.
Alan
Travel Photos - http://www.pbase.com/alangrant
Balkanology: Explore Southeast Europe - http://www.balkanology.com/

rdavid
 
Posts: 23


Post Wed Sep 12, 2007 11:29 am


So do I. :) There are lines only in IE.

andrys
 
Posts: 2701


Post Wed Sep 12, 2007 11:44 am


Alan, It's IE that they're seen in.

rdavid,
Your CSS has '.title' with a border, solid, 1 pixel

The two CSS sheets I tend to use have .caption but no .title entry

Could that be why? At least try it with no border statement
or make border 0 pixel if that's possible. (I don't know.)

rdavid
 
Posts: 23


Post Wed Sep 12, 2007 12:50 pm


Thanks, andrys. There is no .title in my CSS. There is code of my CSS. I cannot understand, where title properties are.

Code: Select all
A:link { color : #FFDAB9}
A:active { color : #d5ae83}
A:visited { color : #FFDAB9}
A:hover { color : #5b80b7}

.display {
    border           : 3px RIDGE #999999;
    background-color : black;
}

BODY {
   MARGIN-TOP: 0px; BACKGROUND: rgb(65,65,65); MARGIN-BOTTOM: 20px
}
DIV {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR: rgb(91,91,101); BORDER-BOTTOM: 0px
}
TH {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR: rgb(91,91,101); BORDER-BOTTOM: 0px
}
TR {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR: rgb(91,91,101); BORDER-BOTTOM: 0px
}
TABLE {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; MARGIN-TOP: -27px; MARGIN-BOTTOM: 7px;
    FONT: 12px verdana, arial, sans-serif; BORDER-LEFT: 0px;
     COLOR: rgb(91,91,101); BORDER-BOTTOM: 0px
}
TABLE.luis {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px;
    FONT: 12px verdana, arial, sans-serif; BORDER-LEFT: 0px;
     COLOR: rgb(91,91,101); BORDER-BOTTOM: 0px
}
FONT {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR: rgb(91,91,101); BORDER-BOTTOM: 0px
}
LI {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR: rgb(91,91,101); BORDER-BOTTOM: 0px
}
UL {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR: rgb(91,91,101); BORDER-BOTTOM: 0px
}
FORM {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR: rgb(91,91,101); BORDER-BOTTOM: 0px
}
BLOCKQUOTE {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR: rgb(91,91,101); BORDER-BOTTOM: 0px
}
P {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 13px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR: rgb(191,191,201); BORDER-BOTTOM: 0px
}
B {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR: rgb(91,91,101); BORDER-BOTTOM: 0px
}
I {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR: rgb(91,91,101); BORDER-BOTTOM: 0px
}
FONT {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR: rgb(91,91,101); BORDER-BOTTOM: 0px
}
CENTER {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR: rgb(91,91,101); BORDER-BOTTOM: 0px
}
FONT {
   DISPLAY: block; FONT: 9px Verdana, Tahoma, Helvetica, sans-serif;
    MARGIN-LEFT: 4px; WIDTH: 170px; COLOR: rgb(91,91,101); MARGIN-RIGHT: 4px;
     LETTER-SPACING: 0px
}
H3 {
   FONT-WEIGHT: normal; FONT-SIZE: 16px; BACKGROUND: rgb(51,51,51);
    PADDING-BOTTOM: 10px; BORDER-LEFT: 0px; COLOR: rgb(204,204,255);
     LINE-HEIGHT: normal; PADDING-TOP: 10px; FONT-STYLE: normal;
      LETTER-SPACING: 0px; TEXT-ALIGN: center; FONT-VARIANT: normal
}

INPUT {
   BORDER-RIGHT: rgb(0,0,0) 1px solid; BORDER-TOP: rgb(0,0,0) 1px solid;
    BORDER-LEFT: rgb(0,0,0) 1px solid; BORDER-BOTTOM: rgb(0,0,0) 1px solid
}
TABLE.thumbnail {
   WIDTH: 10%
}
TD {
   BORDER-RIGHT: 1px; BORDER-TOP: 1px;
   BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-LEFT: 1px;
   BORDER-BOTTOM: 1px; BORDER-COLLAPSE: collapse; empty-cells: show
}
TD.message_body {
   BORDER-RIGHT: 1px; BORDER-TOP: 1px; DISPLAY: block; BACKGROUND: rgb(40,40,40);
    BORDER-LEFT: 1px; BORDER-BOTTOM: rgb(0,0,0) 1px dotted
}
.caption {
   COLOR: rgb(95,121,216); FONT-STYLE: italic
}
.display {
   BORDER-RIGHT: rgb(0,0,0) 1px solid; BORDER-TOP: rgb(0,0,0) 1px solid;
    BACKGROUND: rgb(0,0,0);
    FILTER: progid:DXImageTransform.Microsoft.Shadow(color="#141414",Direction=135,Strength=5);
    BORDER-LEFT: rgb(0,0,0) 1px solid; BORDER-BOTTOM: rgb(0,0,0) 1px solid
}
.lid {
   BACKGROUND: rgb(55,55,55); FONT: 11px Verdana, Tahoma, Helvetica, sans-serif;
    COLOR: rgb(102,102,102); TEXT-DECORATION: none
}
.message_body {
   MARGIN: 5px 5px 10px;
   FONT: 10px Verdana, Tahoma, Helvetica, sans-serif; COLOR: rgb(91,91,101)
}
.sb {
   BACKGROUND: rgb(91,91,101); FONT: 12px Verdana, Tahoma, Helvetica, sans-serif;
    COLOR: rgb(204,204,255); TEXT-DECORATION: none
}
BODY {
   MARGIN-TOP: 0px; TOP: 0px
}
BODY TABLE A IMG {
   DISPLAY: inline
}
HR {
   POSITION: relative
}

/* This is to ensure that long texts in thumbnails are
   wrapped around. Different browsers do it differently */
td.thumbnail font
{
        white-space: -moz-pre-wrap; /* Mozilla*/
        white-space: -pre-wrap; /* Opera 4 - 6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        white-space: pre-wrap; /* CSS3  */
        word-wrap: break-word; /* IE 5.5+ */
}


TD.thumbnail {
    background-color : black;
    border           : 1px solid gray;
    padding          : 1px;
    vertical-align   : middle;
    horizontal-align : middle;
    width            : 200px;
}


img.thumbnail {
    border-style : solid;
    border-width : 1px;
    border-color : white;
}


a.thumbnail {
    display : block;
    padding : 10px 0px 10px 0px;
    width   : 186px;
    height  : 162px;
}


td.thumbnail font, td.thumbnail b {
    display          : block;
    height           : 20px;
    margin-top       : -3px;
    padding          : 0px 2px 0px 2px;
    width            : 154px;
    background-color : black;
    font-size        : 120%;
    color            : #F0F0F0;
    font-family      : maiandra gd, arial, sans-serif;
    color            : #CCCCCC;
}

td.thumbnail br {display: none;}


H2 {
    font-family      : maiandra gd, arial, sans-serif;
    font-weight      : bold;
    font-size        : 27px;
    letter-spacing   : 3px;
    text-align       : center;
    background-color : #000000;
    color            : rgb(204,204,255);
    padding          : 10px 25px 10px 25px;
    border           :  1px solid #AAAAAA;
    margin-left      : 75px;
    margin-right     : 75px;
}

H2:first-letter {
    color      : #d5ae83;
    font-style : bold;
    font-size  : 30px;
}

/* Border around slide show */
#inline_slideshow img {
    border: 1px solid #AAAAAA !important;
}

BODY { margin-top: 0px; top: 0px; }
BODY TABLE A IMG { display: inline; }
HR { position: relative; }


BODY { margin-top: 0px; top: 0px; }
BODY TABLE A IMG { display: inline; }
HR { position: relative; }

alangrant
 
Posts: 861


Post Wed Sep 12, 2007 3:35 pm


Sorry, I misread your original post.

The CSS you have posted here doesn't seem to quite match the CSS I see on the page you asked about, which includes the following code:
Code: Select all
.title {
    font-size         : 10pt;
    color         : #dddddd;
    background-color : transparent;
    font-style         : bold;
    text-align        : center; 
    padding        : 10px 25px 10px 25px;
    border        : 1px solid transparent;
    margin-left        : 150px;
    margin-right     : 150px;
}


As Andrys said, you have a 1px border that seems to be causing the problem. The reason you get boxes is that two elements in this part of the page have the ".title" class - the heading H3 and then a SPAN within that heading.

I don't know why Firefox does it differently but it may be prioritising "transparent" over "solid".
Alan
Travel Photos - http://www.pbase.com/alangrant
Balkanology: Explore Southeast Europe - http://www.balkanology.com/

andrys
 
Posts: 2701


Post Wed Sep 12, 2007 7:18 pm


rdavid wrote:Thanks, andrys. There is no .title in my CSS. There is code of my CSS. I cannot understand, where title properties are.


In your edit_gallery go into the style sheet you're using and edit it to
remove ".title" entry or maybe change the border value to 0 pixels.

If you just leave the border value off, I think it defaults to 0 pixels for .title
but am not sure of that.

In checking view-source with a browser, your CSS sheet for that image page
is at http://css.pbase.com/styles/80682.css
Last edited by andrys on Fri Sep 14, 2007 12:39 am, edited 2 times in total.

rdavid
 
Posts: 23


Post Thu Sep 13, 2007 6:04 am


alangrant and andrys, thank you very much!
--

alangrant, you're right, I posted CSS of my root gallery. Sorry :)

I set border value to 0, so now there is no visible borders. But if I remove the property at all I see another border. Probably because of this sentence: The reason you get boxes is that two elements in this part of the page have the ".title" class - the heading H3 and then a SPAN within that heading.

I don't want that boxes, because they case to wrong alignment. How can I remove boxes from my.title?

andrys, default value is 0, but I still see border in another way, see my question to alangrant.

alangrant
 
Posts: 861


Post Thu Sep 13, 2007 10:05 am


In your H3 settings you have a 1 pixel border. So if you remove the border setting from .title, the H3 border is displayed. By setting the .title border to 0 pixels, this overrides the normal H3 border.
Alan
Travel Photos - http://www.pbase.com/alangrant
Balkanology: Explore Southeast Europe - http://www.balkanology.com/

rdavid
 
Posts: 23


Post Thu Sep 13, 2007 9:06 pm


Why .title is connected to H3 and how can I change it?

rdavid
 
Posts: 23


Post Thu Sep 13, 2007 9:19 pm


alangrant, I liked your galleries. Good photographies! And I love the design. Can I set the same design on my galleries? How can I do it? I prefer to stay with current layout of my root gallery. Thanks in advance.

alangrant
 
Posts: 861


Post Fri Sep 14, 2007 3:33 pm


Why .title is connected to H3 and how can I change it?

H3 is a general heading class; H3.title is specific to the display of the title on each photo page.

Thus changes to H3 properties in CSS will affect all H3 headings (although I can't remember if there are other H3 elements in PBase that are not titles). Changes to .title properties will override the H3 properties, or add to them if they have not been defined in H3.

I'm not sure exactly what you are trying to change - it looks like the 0px border has done what you want?

Can I set the same design on my galleries? How can I do it?

You can use the same design by viewing the CSS from one my galleries, edit your own CSS, delete it and copy+paste my CSS to replace it.

Of course I can't guarantee that my CSS will always do exactly what you want. I would suggest not using my root gallery as there is some special code for the root - better to take the CSS from one of my other galleries.

If you want to preserve your current root design, you will need to have two stylesheets - one for your root containing the existing CSS, and one for the other galleries with the copy of my CSS.
Alan
Travel Photos - http://www.pbase.com/alangrant
Balkanology: Explore Southeast Europe - http://www.balkanology.com/

rdavid
 
Posts: 23


Post Fri Sep 14, 2007 8:02 pm


I already have two different CSS styles for root and others galleries. Thank you.


Board index PBase HTML and Style Sheets Different view in IE

Who is online

Users browsing this forum: No registered users and 2 guests