• Hi there,

    While my blog https://www.latedeparture.com is shown correctly in IE, Firefox somehow can’t handle the CSS and formats the sidebar below the content. I think it has to do with the <div> tags, but I can’t seem to get it to work. Does anyone know a quick and good fix for this?

    Here’s the template’s CSS code.

    /*
    Theme Name: Travelog
    Theme URL:http:/template4all.com
    Author:Templates4all
    Author URL:https://templates4all.com
    Description:Travel wordpress theme
    */
    
    /* CSS Document */
    
    body {
    background-color:#fff;
    background:url(images/body_bg.jpg);
    color:#fff;
    margin:0;
    padding:0;
    }
    
    .postmetadataalt {
    font-size:0.81em;
    padding:7px;
    border-left: 1px solid #e3e3e3;
    color:#fff;
    }
    
    .commentlist
    font-size:0.81em;
    padding:7px;
    border-left: 1px solid #e3e3e3;
    color:#fff;
    }
    
    .partner{
    font-size:0.81em;
    padding:7px;
    margin: 25px;
    border: 1px solid #6890bb;
    }
    
    .pagetitle {
    margin:0;
    padding:0 0 15px 18px;
    }
    
    html {
    font-size:.72em;
    font-family:tahoma, arial;
    }
    
    .normal {
    font-size:1.01em;
    }
    
    .big {
    font-size:1.31em;
    }
    
    .small {
    font-size:0.91em;
    }
    
    h1 {
    font-family:arial, tahoma, times new roman, arial narrow;
    color:#39302B;
    font-size:3.21em;
    font-weight:400;
    line-height:1.01em;
    margin:0;
    padding:0;
    }
    
    #respond {
    color:#fff;
    font-size:1.01em;
    text-transform:uppercase;
    margin:0;
    padding:0;
    }
    
    .content_txt h2 a {
    color: #ffffff;
    text-decoration:none;
    letter-spacing: +0.2em;
    }
    
    .side_content h3 {
    color: #d4e689;
    text-decoration:none;
    letter-spacing: +0.1em;
    font-family: arial, tahoma, times new roman, arial narrow;
    font-size: 13px;
    }
    
    #title {
    color:#fff;
    text-decoration:none;
    background:url(images/title_bg.jpg) right no-repeat;
    height:151px;
    }
    
    .h3 {
    font-size:1.3em;
    color:#fff;
    text-transform:none;
    margin:0;
    padding:0 0 0 29px;
    }
    
    .h4 {
    font-size:1.01em;
    color:#fff;
    text-transform:uppercase;
    vertical-align:middle;
    margin:0;
    padding:0;
    }
    
    .border {
    width:960px;
    vertical-align:top;
    text-align:left;
    
    }
    
    .main_div {
    height:100%;
    vertical-align:top;
    background:url(images/main_bg.gif) left top repeat-y;
    margin:0 0 0 1px;
    }
    
    #wrap{
    width:100%;
    margin:0;
    background:url(images/bg1.jpg) no-repeat right top ;
    }
    
    .main_table {
    width:960px;
    display:table;
    background:url(images/top_bg.jpg) left top no-repeat;
    }
    
    .left_1 {
    width:77px;
    height:100%;
    vertical-align:top;
    display:table-cell;
    text-align:left;
    }
    
    .main_left {
    vertical-align:top;
    display:table-cell;
    text-align:left;
    margin-left:90px;
    width:160px;
    height:100%;
    }
    
    .left_2 {
    width:16px;
    height:100%;
    vertical-align:top;
    display:table-cell;
    text-align:left;
    }
    
    .main_cent {
    width:500px;
    height:100%;
    vertical-align:top;
    display:table-cell;
    text-align:left;
    
    }
    
    .co_name_bg {
    width:500px;
    height:170px;
    vertical-align:top;
    
    }
    
    .co_name {
    vertical-align:top;
    text-align:left;
    font-size:1.2em;
    padding:10px 0px 0;
    font-weight:700;
    }
    
    .co_name a {
    font-family:Georgia, "Book Antiqua", "Souvenir Lt BT", "Times New Roman", serif;
    color:#39302B;
    text-decoration:none;
    font-size:0.85em;
    }
    
    .co_name a:hover {
    color:#999999;
    text-decoration:none;
    font-size:0.85em;
    }
    
    .slogan1 {
    color:#39302B;
    vertical-align:top;
    font-family:Georgia, "Book Antiqua", "Souvenir Lt BT", "Times New Roman", serif;
    font-size:33px;
    font-weight:bold;
    padding:0;
    padding-top:17px;
    }
    
    .slogan {
    color:#999999;
    vertical-align:top;
    font-size:0.8em;
    padding:0;
    padding-top:0px;
    }
    
    .search_bg {
    height:36px;
    width:500px;
    text-align:right;
    }
    
    #search {
    vertical-align:left;
    color:#fff;
    padding:0;
    margin-top:13px;
    }
    
    #search input {
    background:url(images/search-bg.gif) no-repeat top;
    font-size:11px;
    color:#BE2C13;
    font-family:Tahoma, arial, verdana, courier;
    width:150px;
    height:18px;
    vertical-align:middle;
    margin:0 4px 0 12px;
    padding:0;
    border: 2px solid #8c8c8c;
    }
    
    #search .input {
    width:30px;
    height:20px;
    background:none;
    border:none;
    vertical-align:middle;
    margin:0;
    padding:0;
    }
    
    .head_bg {
    width:500px;
    vertical-align:top;
    
    }
    
    .table2 {
    width:500px;
    display:table;
    }
    
    .table_row2 {
    width:500px;
    display:table-row;
    height:100%;
    }
    
    .left2 {
    width:100%;
    vertical-align:top;
    display:table-cell;
    text-align:left;
    }
    
    /* post title */
    
    .head {
    color:#fff;
    font-size: 1.0em;
    line-height:1.11em;
    padding:10px 0 7px 18px;
    
    }
    
    .head a {
    color:#fff;
    text-decoration:none;
    }
    
    .head a:hover {
    color:#fff;
    text-decoration:none;
    }
    
    .right2 {
    width:107px;
    vertical-align:top;
    display:table-cell;
    text-align:left;
    }
    
    .date {
    color:#36454c;
    font-size:0.95em;
    font-weight:700;
    padding:4px 4px 2px 5px;
    border: 1px solid #E8E8E8;
    background: #F2F1F1;
    text-align:left;
    }
    
    .title_txt {
    font-family:Georgia, "Book Antiqua", "Souvenir Lt BT", "Times New Roman", serif;
    font-size:20px;
    font-weight:bold;
    padding:-15px 0px 0px 0px;
    /*background:url(images/title_bg.jpg) right bottom no-repeat;*/
    margin-bottom: 15px;
    }
    
    .content_txt {
    line-height:1.55em;
    padding:18px 0px 0px 16px;
    /*background:url(images/title_bgg.jpg) right top no-repeat;*/
    margin-bottom: 15px;
    color:#fff;
    }
    
    .content_txt b a {
    color:#F4F2E1;
    font-weight:400;
    text-decoration:underline;
    }
    
    .content_txt b a:hover {
    color:#fff;
    font-weight:400;
    text-decoration:none;
    }
    
    .comment {
    color:#fff;
    font-weight:700;
    text-transform:uppercase;
    padding:0;
    }
    
    .comment a {
    color:#fff;
    font-weight:700;
    text-decoration:underline;
    }
    
    .comment a:hover {
    color:#fff;
    font-weight:700;
    text-decoration:none;
    }
    
    .content_txt li {
    list-style:none;
    background:url(images/li_bg2.gif) left top no-repeat;
    vertical-align:bottom;
    line-height:1.81em;
    color:#fff;
    margin:0;
    padding:0px 0px 0px 16px;
    }
    
    .content_txt ul li a {
    text-decoration:underline;
    color:#F4F2E1;
    }
    
    .table3 {
    width:450px;
    display:table;
    }
    
    .table_row3 {
    width:450px;
    display:table-row;
    height:100%;
    }
    
    .left3 {
    width:151px;
    vertical-align:top;
    display:table-cell;
    text-align:left;
    }
    
    .cent3 {
    width:131px;
    vertical-align:top;
    display:table-cell;
    text-align:left;
    }
    
    .right3 {
    width:168px;
    vertical-align:top;
    display:table-cell;
    text-align:left;
    }
    
    .right_1 {
    width:71px;
    height:100%;
    vertical-align:top;
    display:table-cell;
    text-align:left;
    }
    
    .widget_style {
    vertical-align:top;
    text-align:left;
    padding:0;
    }
    
    .cats_head_bg {
    vertical-align:top;
    
    }
    
    .widget_style ul {
    margin:0;
    padding:11px 0 0 20px;
    }
    
    .widget_style li {
    list-style:none;
    /*background:url(images/bullet.gif) left top no-repeat;*/
    vertical-align:bottom;
    line-height:1.51em;
    color:#426672;
    margin:0;
    padding:0px 0px 0px 0px;
    }
    
    .widget_style ul li a {
    text-decoration:none;
    color:#426672;
    }
    
    .widget_style li a:hover {
    color:#fff;
    text-decoration:none;
    }
    
    #calendar_wrap {
    vertical-align:top;
    color:#2e4263;
    padding:0 0 15px 29px;
    }
    
    #calendar_wrap a {
    color:#2c5c72;
    text-decoration:none;
    font-weight:700;
    }
    
    #calendar_wrap a:hover {
    color:#fff;
    text-decoration:none;
    font-weight:700;
    }
    
    #search_txt {
    vertical-align:top;
    text-align:left;
    margin:0;
    padding:15px 0;
    }
    
    #search_txt input {
    font-size:11px;
    color:#464646;
    font-family:Tahoma, arial, verdana, courier;
    width:140px;
    height:15px;
    vertical-align:top;
    margin:0;
    padding:0;
    }
    
    #search_txt strong {
    color:#FFF;
    text-transform:uppercase;
    font-size:1.01em;
    }
    
    #search_txt .input {
    width:59px;
    height:22px;
    background:none;
    border:none;
    vertical-align:top;
    margin:0;
    padding:0;
    }
    
    .footer {
    background:url(images/foot_bg.jpg) top no-repeat;
    vertical-align:top;
    width:960px;
    height:85px;
    color:#324765;
    font-size: 0.78em;
    
    }
    
    .footer_txt {
    vertical-align:top;
    font-weight:600;
    
    text-align:center;
    color:#999999;
    padding:10px 5px 0 50px;
    }
    
    .footer_txt a {
    color:#999999;
    text-decoration:none;
    }
    .footer_txt a:hover {
    color:#fff;
    text-decoration:none;
    }
    
    a {
    color:#324765;
    text-decoration:none;
    }
    
    .content_txt a {
    color:#FFFF;
    text-decoration:underline;
    border-bottom: 2px dashed #FFFF;
    }
    
    a:hover,.content_txt h2 a:hover {
    color:#fff;
    text-decoration:none;
    }
    
    p,.content_txt ul {
    margin:0;
    padding:8px;
    }
    
    h2,h3,.h2 {
    color:#23385a;
    font-size:1.3em;
    margin:0;
    padding:0;
    font-family:arial, tahoma, times new roman, arial narrow;
    
    }
    .content_txt a:hover,{
    color:#fff;
    text-decoration:none;
    }
    .content_txt li a:hover {
    color:#fff;
    text-decoration:none;
    }
    .footer_txt a:hover {
    color:#fff;
    text-decoration:none;
    }
    
    a {
    color:#F4F2E1;
    text-decoration:none;
    }
    
    .content_txt a {
    color:#FFFFFF;
    text-decoration:none;
    border-bottom: 1px dashed #FFFFFF;
    }
    
    a:hover,.content_txt h2 a:hover {
    color:#fff;
    text-decoration:none;
    }
    
    p,.content_txt ul {
    margin:0;
    padding:8px;
    }
    
    h2,h3,.h2 {
    color:#F4F2E1;
    font-size:1.3em;
    text-transform:uppercase;
    margin:0;
    padding:0;
    font-family:arial, tahoma, times new roman, arial narrow;
    
    }
    .content_txt a:hover,{
    color:#fff;
    text-decoration:none;
    }
    .content_txt li a:hover {
    color:#fff;
    text-decoration:none;
    }
    .footer_txt a:hover {
    color:#fff;
    text-decoration:none;
    }
    
    .content_txt strong,.content_txt b {
    color:#23385a;
    }
    
    #links_with_style,#archives,#meta,#recent-comments,#recent-posts,#categories,#calendar,#pages {
    vertical-align:top;
    padding:-10px 0 0 0px;
    text-decoration: none;
    }
    
    #google-search,#text-1,#delicious {
    vertical-align:top;
    }
    
    #gsearch,#textwidget,#delicious-box {
    text-align:left;
    padding:15px 0 0;
    }
    
    blockquote {
    	margin: 15px;
     	padding: 10px;
      	border-left: 3px dashed #e3e3e3;
    }
    
    img {
    	border:0;
    	}
    img a {
    	border:0;
    	}
    
    /* Sidebar */
    .sideblock
    {
    	padding: 13px 25px;
    	background-position: top;
    	background-repeat: no-repeat;
    	background-image: url(images/sidebar.gif);
    }
    
    .sideblock ul { }
    
    .sideblock h3 { margin-top: 5px; margin-right: -23px; font-size: 11px; font-weight: bold; align: right; color: #8c8c8c; }
    
    #sideblock{ margin: 0; padding-top: 5px; font-weight: bold; color: #939394; }
    
    #sidebar dd { margin: 0 0 5px; padding-bottom: 5px; line-height: 1.8em; }
    
    #sideblock a:link { border-bottom-width: 0; font-weight: normal; text-decoration: none; color: #939394; }
    
    #sideblock a:visited { border-bottom-width: 0; font-weight: normal; text-decoration: none; color: #939394;}
    
    #sideblock a:hover, #sideblock a:active { border-bottom: 1px solid #cfcfcf; text-decoration: none; color: #939394;}
    
    ul#menu{
    list-style-type:none;
    }
    ul#menu li {
    	float:left;
    	}
    ul#menu li a {
    	padding:3px 10px 5px 5px;
    	display:block;
    	color:#D4E689;
    	margin-right:2px;
    	font-weight:bold;
    	background-color:#39302B;
    	font-family:verdana;
    	}
    ul#menu li a:hover {
    	padding-top:2px;
    	}
    
    .post_title {
    font-size:25px;
    color:#5a6b73;
    text-transform:none;
    margin:0;
    padding:0 0 0 0px;
    }
    
    .day {
    font-size:15px;
    color:#222;
    text-transform:none;
    margin:0;
    padding:2px 0 0 13px;
    }
    
    .month {
    font-size:11px;
    color:#222;
    text-transform:none;
    margin:0;
    padding:2px 0 0 12px;
    }
    
    .description {
    font-size:11px;
    color:#fff;
    text-transform:none;
    margin:0;
    padding:0 0 0 25px;
    }
    
    /*rausgeloescht:
    .main_table_row {
    width:960px;
    height:100%;
    display:table-row;
    margin-left:10px;
    }
    */
    
    *******************************************************************************
    bookmarkify.css
    
    This style sheet if for the Bookmarkify plugin for WordPress
    
    Copyright 2008 GARA Systems, Inc.
    
    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; either version 2 of the License, or
    (at your option) any later version.
    
    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.
    
    HISTORY (version cooresponds to history of bookmarkify.php)
    
    Version		Date		Author		Description
    --------	--------	-----------	------------------------------------------
    0.1			20080222	Gary		Initial version
    0.2			20080223	Gary		No Change
    0.3			20080224	Gary		No Change
    0.4			20080225	Gary		Created the copyhtml and linkbuttons class
    0.5			20080226	Gary		Created the title class
    ..
    0.8			20080310	Gary		Disabled the copyhtml class
    							Added hover style for div.brand a
    0.8.3			20080311	Gary		Removed deprecated style definitions.
    0.8.9			20080318	Gary		Change default theme to "Subdued"
    
    INSTALLATION
    
    To use this style sheet with Bookmarkify do one of the following:
    
    1.  Add the blog to your site:
    
    Upload this file to your website and link to it in from your Blog theme's
    header file.
    
    OR
    
    Copy the contents of this file to your theme's active style sheet.
    
    2.  Modify the style settings to integrate the design with your site.
    
    For more Themes visit https://www.gara.com/projects/bookmarkify/
    
    *******************************************************************************/
    
    div.bookmarkify
    {
    	margin: 0px;
    	border: none;
    	padding: 20px 0px 0px 0px;
    
    	height: 1%;
    
    	background: transparent;
    
    	text-align: left;
    	vertical-align: middle;
    
    	font-family: verdana, arial;
    	font-size: 12px;
    }
    
    div.bookmarkify a
    {
    	text-decoration: none;
    
    	font-family: verdana, arial;
    }
    
    div.bookmarkify a:hover
    {
    	text-decoration: underline;
    }
    
    div.bookmarkify div.title
    {
    	margin: 0px;
    	border: none;
    	padding: 0px;
    
    	height: 1%;
    
    	background: transparent;
    
    	vertical-align: auto;
    	font-size:11px;
    	font-weight: normal;
    }
    
    div.bookmarkify div.linkbuttons
    {
    	margin: 0px;
    	border: none;
    	padding: 2px;
    
    	height: 1%;
    
    	background: transparent;
    
    	vertical-align: auto;
    }
    
    div.bookmarkify div.linkbuttons a
    {
    	margin: 0px;
    	border: none;
    	padding: 2px;
    
    	height: 1%;
    
    	background: transparent;
    
    	vertical-align: auto;
    }
    
    div.bookmarkify div.linkbuttons a:hover
    {
    }
    
    div.bookmarkify div.linkbuttons a img
    {
    	margin: 0px;
    	border: none;
    	padding: 0px;
    
    	background: transparent;
    	opacity: 0.5;
    	filter:alpha(opacity=50); 
    
    	vertical-align: auto;
    }
    
    div.bookmarkify div.linkbuttons a:hover img
    {
    	opacity: 1;
    	filter:alpha(opacity=100);
    }
    
    div.bookmarkify div.brand
    {
    	margin: 0px;
    	border: none;
    	padding: 2px;
    
    	height: 1%;
    
    	background: transparent;
    
    	vertical-align: auto;
    }
    
    div.bookmarkify div.brand a
    {
    	margin: 0px;
    	border: none;
    	padding: 0px;
    
    	height: 1%;
    
    	background: transparent;
    
    	vertical-align: auto;
    
    	color: gray;
    	font-weight: normal;
    }
    
    div.bookmarkify div.brand a:hover
    {
    }

    Thanks a lot!

    tom.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Firefox somehow can’t handle the CSS

    thats ludicrous.

    I think it has to do with the <div> tags, but I can’t seem to get it to work.

    https://validator.w3.org/check?uri=https://www.latedeparture.com/

    You have structural errors that will affect the way things look. Fix them, and see if FF doesnt show your page differently.

    Tom,

    I took a quick look and this theme has a serious case of div-itis (inflammation of the div).

    I mean no offense when I say the markup is completely out of control.

    There are so many unnecessary nested divs that even with Firebug or the Web Developer toolbar, it’s hard to get to the root of the problem.

    I’m not sure why there are so many references to tables when you’re not using tables. It looks like the theme’s trying to emulate tables, but that’s such a huge hassle and adds so much non-semantic markup to the design and excess weight to the code.

    Personally, I’d simplify the markup quite a bit. It will make your life a lot easier.

    You could use one of the default templates as a base or reference, even.

    It certainly wouldn’t be a quick fix, but it would be good. ??

    I am searching the forums for the same problem -and after viewing tombat24’s page it turns out we are using the same base theme…

    Tombat – your site seems to be working correctly now – any suggestions?

    my blog is https://www.robandallison.ca

    Views okay in IE but when viewed in Firefox or Safari all of the content shifts over outside of the main window.

    Not sure if this is exactly the same problem but any suggestions would be greatly appreciated.

    Thanks.
    Rob

    After looking at the code…

    I decided to go with tried and true Kubrick and just alter the much cleaner code to make my site look as it did with the faulty Travelog theme.

    In the end – it is much cleaner and easier to adjust.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Firefox problems with theme’ is closed to new replies.