Making WP Classic 1.5 look the same in various browsers

  • Resolved dblast

    (@dblast)


    16 years, 4 months ago

    Hi everyone, I have wordpress looking the way I like in in firefox but it is a disaster in IExplorer. The widgets overlap the graphics and don’t work, its a mess. I need to get it looking as close to the firefox version as possible.

    WordPress version 26.1
    Theme WordPress classic 1.5

    https://www.warrior-scholar.com/wordpress/

Viewing 14 replies - 1 through 14 (of 14 total)

  • well some time it may not be possible to fix styling issue, if possible try to get response from theme developer.

    you’d most likely have to add some absolute positioning CSS (or do some other major CSS overhall) to the placement of the karate dude to get it to working IE6.

    The CSS rules that Firefox is respecting to to achieve that overlapping effect are ignored by IE6. Specifically in your case is in #menu:
    width:11em
    Firefox will respect andenforce that width while IE6 will expand to fit content that exceeds that width (the karate dude)

    Also I note the following code:

    <div class="textwidget">
<body bgcolor="#005680">

    that extra BODY tag needs to go

    Thread Starter dblast

    (@dblast)

    you’d most likely have to add some absolute positioning CSS (or do some other major CSS overhall) to the placement of the karate dude to get it to working IE6

    The ‘Karate dude’ is a text widget, it seems that some of the other browsers don’t respect the size of the image in the widget or the fact that it is a widget at all and overlaps other widgets on top. So is there a way I can simply define its position absolutely within the widget with html?

    If not I’m new to this can you point me in the right direction with the absolute positioning tags and some advice on changing them. I looked at the site in browsershots and too many have the same issue with positioning that IE has (Opera etc) I’d like to launch this site but this incompatibility is holding me back.

    Thanks again

    Dan

    I the below is a rough fix for IE/firefox.

    Ive left the borders on so you can kind of see what going on. Add to style.css – at the bottom should be fine

    #text-245503761{
	//holds karate man, give it some height to push the lower menu items down
	border:1px solid green;
	height:340px
	}

DIV.textwidget{
	//position karate man absolutely on the screen
	border:1px solid red;
	position:absolute;
	right:2px;
	top:5px;
	}	

#text-277573451 DIV.textwidget{
	//Holder for Recommend This Site To. Without this line it gets position like the karate dude
	position: relative;
	}

    To more elegegantly achive the effect you’re after the karate graphic would need to be worked into the template via CSS not added in as widget.

    there is some ugly incorrectly nested table code in the “Recommend This Site To:” area

    Thread Starter dblast

    (@dblast)

    Wow! first thank you very much. It fixed the I.E Bug but as you mentioned the recommend site field needs to be repositioned. I am completely new at this so before I wrote this I did give it my best shot to experiment and try to drop the recommend widget on my own because I do appreciate your assistance and dont expect you to do the work for me. But I am not up to speed yet so I can’t quite get it.

    Interestingly I deleted the recommend widget then put up a new one, that did not work. I added in another widget (calendar) to see if that would force a new text widget further down it forced the title down but popped the fields back up on the Karate dude.

    So I experimented with what you gave me adding in:

    /* End captions & aligment */

    #text-245503761{
    //holds karate man, give it some height to push the lower menu items down
    border:1px solid green;
    height:340px
    }

    DIV.textwidget{
    //position karate man absolutely on the screen
    border:1px solid red;
    position:absolute;
    right:2px;
    top:5px;
    }

    #text-277573451 DIV.textwidget{
    //Holder for Recommend This Site To. Without this line it gets position like the karate dude
    position: absolute;
    .wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    padding: 0 4px 5px;
    margin: 0;
    }

    and I must be doing something wrong here. Please a little more help.

    THanks a mill.

    Dan

    OK do this instead – delete the previous lines – my orig code was too broad and affected other widget items

    we’ll be more specific and only target the LI that holds the karate guy – its been given an ID of #text-245503761. If you ever remove him and add back in you’ll probably have to adjust this value. This solution is specific to how you have it now

    #text-245503761{
	//holds karate man, give it some height to push the lower menu items down
	display:block;
	height:340px
	}

#text-245503761 DIV.textwidget{
	//position karate man absolutely on the screen
	display:block;
	position:absolute;
	right:2px;
	top:5px;
	}
    Thread Starter dblast

    (@dblast)

    AWESOME! Thanks so much.

    Dan

    Looks like you fixed it cuz I just tested that site in FF and IE and it looks fine, congrats

    Thread Starter dblast

    (@dblast)

    O.k I hope I’m not pushing my newbie luck here but I started to experiment. I installed widget logic thinking I could turn on the ‘karate dude’ graphic on the main page and have a ‘meditation dude’ graphic on the mediation page.

    But when I did that the original graphic was turned off and the new one on but I had the field overlap problem return in I.E.

    I then added the following after the original code zeniph was kind enough to write pointing to a different text widget with a different graphic, turned on this widget on a specific page and it did not look the same in I.E (same as the original problem)

    #text-280119011{
    //holds mediation man, give it some height to push the lower menu items down, here I changed the text block to the meditation graphic
    display:block;
    height:280px
    }

    #text-280119011 DIV.textwidget{
    //position meditation man absolutely on the screen, here I changed the text block to the meditation graphic
    display:block;
    position:absolute;
    right:2px;
    top:5px;
    }

    I went back to the original code. But my question simply is there a way that I can switch out the ‘karate dude’ when other pages are clicked? It would be neat to have a matching graphic i.e mediation dude for the mediation page, a kicker dude for a kicking page etc.

    That would be the cherry on top.

    Thanks

    Dan

    I think what you’re trying to do is probably outside the scope of how widgets operate.

    Probably best done with the creation of a custom template for each category. Not hard but would require a little bit of PHP/HTML.

    Thread Starter dblast

    (@dblast)

    Aggh.. So close. I can turn the widgets (graphics) on certian pages with the ‘karate dude’ but when I put in another graphic ‘meditation dude’ I run into the exact problems I had before your fix. Looks great in Firefox but in I.E the other widgets overlap the graphic just like the first time.

    I was hoping if I just copied your fix and popped in the second text widgets number that I would get what I needed.

    No easy way out for a newbie huh? Dam it was coming together so nicely too.

    Thanks

    Thread Starter dblast

    (@dblast)

    The interesting thing I notice is if I make that same image a hyperlink it pushes the other widgets down in both FF and IE but does not have the benefit of crossing over onto the main page which looks nicer. If it is a straight image then IE overlaps it with the other widgets.

    So there is no easy way like duplicating your code and inserting the other text widgets number then turning that widget off with widget logic?
    It actually works accept for the overlapping widgets.

    Add the below and it should work. They key is to having consistency in your naming conventions and your approach, then apply that naming convention to the CSS.

    #daikos-text-1{
	//holds meditation man, give it some height to push the lower menu items down
	display:block;
	height:340px
	}

#daikos-text-1 DIV.DaikosText{
	//position meditation man absolutely on the screen
	display:block;
	position:absolute;
	right:2px;
	top:5px;
	}
    Thread Starter dblast

    (@dblast)

    Works great thanks a million. You’re the wordpress dude!

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Making WP Classic 1.5 look the same in various browsers’ is closed to new replies.