5 replies [Last post]
Tijn
Offline
newbie
Last seen: 16 years 26 weeks ago
Joined: 2004-10-13
Posts: 7
Points: 0

Hello,

I am pretty new to this site and CSS and have some problems.
My site works fine in Firefox, but has some quirks in IE and Safari.
Does anyone has some comments to make the site look better?
Does anyone has some tips to fix the bugs in IE and Safari?

The url is www.broodrooster.net

Thanks!

Tijn

rck
Offline
Enthusiast
Last seen: 14 years 7 weeks ago
Joined: 2004-09-26
Posts: 75
Points: 0

Re: Comment my site please (and help me debug in the process

Tijn wrote:
Does anyone has some comments to make the site look better?

Some random notes:

the calendar table. you might want to give it a single style "calendar". You could then style it like

#calendar {
  // the stuff you have in "defcalendar calendar"
}

#calendar tr {
  text-align : center;
  margin     : auto;
  vertical-align : top
}

etc. Would save a lot of code and make changes easier (haven't tried it, you might need to tweak it a bit).

spaces in style-names are... risky, I guess.

the title: do you have two spaces in it at the end for a purpose?

the content table: there's something very weird going on in internet explorer. did you try to set the width? it might help keeping the banner readable as well. you'd might want to set the width fixed in pixel and make the borders auto, so the whole thing would be centered...

please take my advice with a certain amount of salt, as I'm struggling with css myself! Wink

Tijn
Offline
newbie
Last seen: 16 years 26 weeks ago
Joined: 2004-10-13
Posts: 7
Points: 0

Comment my site please (and help me debug in the process)

Maybe it helps if I post my html and css.

html page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html 
xmlns="http://www.w3.org/1999/xhtml"> <head> <title>[[weblogtitle]]&nbsp;-
&nbsp;[[weblogsubtitle]]</title> [[rss_autodiscovery]] [[atom_autodiscovery]] 
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]><script src="/ie7/ie7-standard-p.js" type="text/javascript">
</script><![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=[[charset]]" />
<link rel="stylesheet" type="text/css" href="[[template_dir]]pivot_template.css" 
/> [[calendar_style]] </head>

<body>
<div id="wrapper">

<div id="header">
<!-- <h1><a href="[[home]]">[[weblogtitle]]</a>&nbsp;&nbsp;-</h1><h4>&nbsp;[[weblogsubtitle]]</h4> -->

<!-- end of 'header' -->
</div>

<div id="leftcolumn">

	<div class="block">
	<h3>About</h3>
	<p>This is the default template for <a href="http://www.pivotlog.net" title="Pivot: a GPL weblog tool.">Pivot</a>. You can change this text by editing the file frontpage_template.html in your pivot/templates/ folder. </p>
	</div>


        <div class="block">
        <h3>[[label:calendar]]</h3>
        [[calendar]]
        </div>


        <div class="block">
        <h3>[[label:last_comments]]</h3>
        [[last_comments]]
        </div>


        [[get_referrer]]
        <div class="block">
        <h3>[[label:last_referrers]]</h3>
        [[show_referrers]]
        </div>


        <div class="block">
        <h3>[[label:archives]]</h3>
        <p>[[archive_list]]</p><br />
        <p>Zoek in de archieven</p>
        [[search::zoek!]]
        </div>


        <div class="block">
        <h3>[[label:links]]</h3>
        <p>[[link_list]]</p>
        </div>


        <div class="block">
        <h3>Stuff</h3>
        <p>[[pivotbutton]]&nbsp;<br />
        [[rssbutton]]&nbsp;<br />
        [[atombutton]]&nbsp;<br />
        </p>
        </div>
                
	<!-- end of 'leftcolumn' -->
</div>

<div id="centercolumn">

	<div class="content">

		[[subweblog:standard]]

		<!-- end of 'content' -->
	</div>

	<!-- end of 'centercolumn' -->
</div>

<div id="clear"></div>

<!-- end of 'wrapper' -->
</div>
</body>
</html>

My css:

body {
   margin: 0px;
   padding: 0px;
   background: #814648;
}

body, p, html, table, td {
   font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 12px;
   line-height: 18px;
}

#wrapper {
        float: right;
        margin-left: 150px;
        margin-right: 150px;
        border: solid #AFC7BB 2px;
        background-color: #FFFFCA;

}

#clear {
        clear: both;
}

.pivot-image {
   /* style for images in entries */
}

.pivot-popupimage {
   /* style for popup-images in entries (thumbnails) */
}

.pivot-popuptext {
   /* style for popup-images in entries (textual links) */
}



#centercolumn {
   border: 0px solid #666666;
   margin-left: 203px;
   margin-top: -6px;
   padding: 10px 4px;
   /* float: right; */
}

#header {
   background: #FFFFCB;
   height: 123px;
   background-image: url(kop.jpg);
        border-top: solid #AFC7BB 2px;
}

#leftcolumn {
   left: 200px;
   /* position: absolute; */
   float: left;
   width: 200px;
   margin-top: 4px;
}

#rightcolumn {
   position: absolute;
   right: 0px;
   width: 200px;
   margin-top: 4px;
}

#leftcolumn, #leftcolumn p, #rightcolumn, #rightcolumn p {
   font-size: 11px;
   line-height: 16px;
}


#footer {
   border: 1px solid #00f;
   clear: both;
}

.block {
   margin: 0px 6px 4px 6px;
   padding: 4px;
   background: #FFF;
   border: 1px solid #AEC7BA;
}


.block H3 {
   background: #C7D7CF;
   color: #26344C;
   margin: -4px -4px 4px -4px;
   padding: 4px;
   border-bottom: 1px solid #AEC7BA;
   font-size: 11px;
}

.block P {
   margin: 0px;
}

.content {
   margin: 0px;
   padding: 4px;
   background: #FFF;
   border: 1px solid #AEC7BA;
}

.entrycontent {
   padding: 12px;
   background: #FFF;
   border: 1px solid #AEC7BA;
}


.content p {
   margin: 4px 2px 4px 2px;
}


H1 {
   font-size: 16px;
   margin: 4px;
   color: #FFF;
   display: inline;
}


H2 {
   font-size: 13px;
   border-top:1px dashed #AEC7BA;
   border-bottom:1px dashed #AEC7BA;
   margin:0px;
   padding: 2px;
   color: #26344C
}

H3 {
   font-size: 13px;
}

H4 {
   font-size: 14px;
   margin: 4px;
   color: #FFF;
   display: inline;
   font-style: italic;
}

.date {
   color: #666;
   font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 10px;
   line-height: 16px;
   font-weight: normal;
   float: right;
}

.date_linkdump {
   color: #666;
   font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 10px;
   line-height: 16px;
   font-weight: normal;
   float: right;
}

.entryfooter {
   color: #666;
   font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 11px;
   line-height: 16px;
   font-weight: normal;
   text-align:right;
   margin: 0px;
   padding: 6px 0px;
   clear: both;
}

.entryfooter_linkdump {
   color: #666;
   font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 10px;
   line-height: 16px;
   font-weight: normal;
   text-align:right;
   margin: 0px;
   padding: 6px 0px;
   border-bottom: 1px dashed #666;
}

.entryfooter A, .date A, .entryfooter_linkdump A, .date_linkdump A {
   text-decoration: none;
   font-weight: bold;
   /* color: #5C6B8E; */
        color: #814648;
}


.entryfooter a:hover, .date a:hover {
   text-decoration: underline;
   font-weight: bold;
   /* color: #5C6B8E; */
   color: #814648;
}


a {
/* color: #253A69; */
color: #814648;
}

.prevnext_links {
   float: right;
   /* color: #FFF; */
   color: #814648;
}

H1 A, .prevnext_links A {
   /* color: #FFF; */
   color: #814648;
   font-weight: bold;
   text-decoration: none;
}

H1 A:hover, .prevnext_links A:hover {
   /* color: #FFF; */
   color: #814648;
   font-weight: bold;
   text-decoration: underline;
}



/* these styles are for the search boxes */
.searchbox {
   width: 10em;
   font-size: 10px;
}

.searchbutton {
   border: 1px solid #000;
   font-size: 10px;
}


/* these styles are for the calendar widget */
.calendar {
   padding: 1px 5px;
   margin: 0px;
   border-right: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
   font-size: 11px;
}


.calendarHeader {
   font-weight: bold;
   color: #000;                   
   background: #DDD;
   margin:0px;
   padding: 2px 5px;
   font-size: 11px;
}

.calendartoday {
   background-color: #FFFFFF;
   font-weight: bold;
   text-decoration: underline;
}

   
table.calendar {
/* only the calendar has a line, not the individual cells */
   border: 1px solid #000;
   padding:0px;
   width: 175px;
}

.calendarHeader A, .calendar A {
   font-weight: bold;
   /* color: #253A69; */
   color: #814648;
   text-decoration: none;
}
/* end of the calendar styles */ 

Tijn
Offline
newbie
Last seen: 16 years 26 weeks ago
Joined: 2004-10-13
Posts: 7
Points: 0

Re: Comment my site please (and help me debug in the process

rck wrote:

the calendar table. you might want to give it a single style "calendar". You could then style it like

#calendar {
  // the stuff you have in "defcalendar calendar"
}

#calendar tr {
  text-align : center;
  margin     : auto;
  vertical-align : top
}

etc. Would save a lot of code and make changes easier (haven't tried it, you might need to tweak it a bit).

Thanks, good idea. I'm going to look into that.

rck wrote:

spaces in style-names are... risky, I guess.

What spaces? Do you mean things like this?
.block H3 { ... }

These are descendant selectors. They are used to apply rule to elements of the right-most type in the space-seperated list of element types only where that element type descends from (i.e., inherits) the type to is left. (accordign to my book Tongue)

rck wrote:

the title: do you have two spaces in it at the end for a purpose?

Solved that. Pivot (the underlying program) adds an extra line to the title but I didn't want to use that. But it looks beter with that extra line.

rck wrote:

the content table: there's something very weird going on in internet explorer. did you try to set the width? it might help keeping the banner readable as well. you'd might want to set the width fixed in pixel and make the borders auto, so the whole thing would be centered...

Tried that, but didn't work.

rck wrote:

please take my advice with a certain amount of salt, as I'm struggling with css myself! Wink

Even the big companies are struggling with CSS, so thanks for helping Smile

rck
Offline
Enthusiast
Last seen: 14 years 7 weeks ago
Joined: 2004-09-26
Posts: 75
Points: 0

Re: Comment my site please (and help me debug in the process

Quote:
.block H3 { ... }

These are descendant selectors. They are used to apply rule to elements of the right-most type in the space-seperated list of element types only where that element type descends from (i.e., inherits) the type to is left. (accordign to my book Tongue)

Nope, I meant the "defcalendar calendar" in the calendar table... I've only looked at the html

Quote:
rck wrote:

banner readable as well. you'd might want to set the width fixed in pixel and make the borders auto, so the whole thing would be centered...

Tried that, but didn't work.

Have a look at http://nemesis1.f2o.org/articles, that worked for me quite well. Except the strange problem posted in the "site structure" forum

Tijn
Offline
newbie
Last seen: 16 years 26 weeks ago
Joined: 2004-10-13
Posts: 7
Points: 0

Comment my site please (and help me debug in the process)

I remade the CSS and it now works splendid. Once again errors because of not working securely...