Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Last one - weird IE issue
pinstripesc (New Admin) 2/20/2011 6:38 AM EST : Last one - weird IE issue
pinstripesc
Posts: 4895
Zomgawsh Poster

Almost done!

If one were to view this page, he/she might notice in Internet Explorer that there is a horizontal slice through the tops of all the content boxes. This doesn't happen in any other browser that I tested.

Any ideas what might be causing this?
TopBottom

Mottie (MVP) 2/20/2011 10:53 AM EST : RE: Last one - weird IE issue
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Pinstripesc!

Have you started hating IE yet? I know I do! Anyway for some reason, I honestly don't know why and digging into it any more would make me pull out my hair, IE doesn't like mixing background images and images in this situation. If I pulled out a single widget and looked at it, it'd be fine. So I think the easiest solution would be to change your content boxes. I've already done all the work for you, all you need to do is copy that HTML below, then add it to your custom HTML for widgets:
  • Copy this code (select it with your mouse, then type Ctrl-C to copy)

    <table border="0" cellspacing="0" cellpadding="0" width="100%">
    <tr>
      <td style="width:13px;height:29px;background:url(http://www.axiomfiles.com/Files/42293/2011_brdr_topleft.png) no-repeat;"></td>
      <td style="height:29px;background:url(http://www.axiomfiles.com/Files/42293/2011_brdr_top.png) repeat-x;text-align:center;"><div class="ContentBoxTitleNoBackground">$block[title]&nbsp;</div></td>
      <td style="width:13px;height:29px;background:url(http://www.axiomfiles.com/Files/42293/2011_brdr_topright.png) no-repeat;"></td>
    </tr>
    </table>
    <table border="0" cellspacing="0" cellpadding="0" width="100%">
    <tr>
      <td style="width:13px;background:transparent url(http://www.axiomfiles.com/Files/42293/2011_brdr_left.png) repeat-y;">&nbsp;</td>
      <td class="ContentBoxBody">$block[content]&nbsp;</td>
      <td style="width:13px;background:transparent url(http://www.axiomfiles.com/Files/42293/2011_brdr_right.png) repeat-y;">&nbsp;</td>
    </tr>
    </table>
    <table border="0" cellspacing="0" cellpadding="0" width="100%">
    <tr>
      <td style="width:13px;height:29px;background:url(http://www.axiomfiles.com/Files/42293/2011_brdr_btmleft.png) no-repeat;"></td>
      <td style="height:29px;background:url(http://www.axiomfiles.com/Files/42293/2011_brdr_btm.png) repeat-x;">&nbsp;</td>
      <td style="width:13px;height:29px;background:url(http://www.axiomfiles.com/Files/42293/2011_brdr_btmright.png) no-repeat;"></td>
    </tr>
    </table>
    <br>

  • Now go to your Control Panel > Custom HTML & Script
  • There are three places to add the above code (Boxes, Left Side... Boxes, Center... and Boxes, Right Side)
  • Click on one of the Boxes (named above)
  • Click inside the editor, then type Ctrl-A (to select all content) - there may not be anything in there to start with
  • Press delete on your keyboard - make it all go away!!
  • Now press Ctrl-V to paste in the new HTML
  • Check the "Enable?" box if it isn't already checked
  • Click [ Save Changes ]
  • Rinse and repeat the above steps for the other two boxes
  • Now reload your site and it shouldn't have that gap anymore
  • And stop using IE!! hehe.
TopBottom

pinstripesc (New Admin) 2/20/2011 5:16 PM EST : RE: Last one - weird IE issue
pinstripesc
Posts: 4895
Zomgawsh Poster

USE IE? In this day and age!? Yes the sad thing is that other people use it.

Just like that! The only thing now is that the left box (only the links one on the front page) is missing its left and right borders....but that's ok..if I don't say anything people will probly  think it's intentional...

EDIT: Oh, wait..no it's doing it on other browsers too. Well I don't want to have to see it!
EDIT2: Upon further investigation, it looks like it's only happening on content boxes with HMTL in them, and if I go to edit the HTML, it has all been truncated down to the first line of whatever code was in it.
TopBottom

Mottie (MVP) 2/21/2011 2:02 AM EST : RE: Last one - weird IE issue
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Pinstripesc!

Oops I missed adding two "&nbsp;" in the HTML... try it now.
TopBottom

pinstripesc (New Admin) 2/22/2011 11:56 PM EST : RE: Last one - weird IE issue
pinstripesc
Posts: 4895
Zomgawsh Poster

HURG, ok, everything is showing up right EXCEPT the right border just for the left box on the frontpage..
TopBottom

Mottie (MVP) 2/23/2011 8:58 AM EST : RE: Last one - weird IE issue
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Pinstripesc!

Yeah, I've had trouble with that instruction box in the past too, you just need to make the left zone a bit wider... like 200px. Then change the styling for the instruction box (the differences are in red):
TopBottom

pinstripesc (New Admin) 2/23/2011 5:22 PM EST : RE: Last one - weird IE issue
pinstripesc
Posts: 4895
Zomgawsh Poster

Hrm.. The only time I'm able to get the right border to show is if the width is 135ish with no margin. Around 140 you can see it start to cut off. 

Is there no other way? The box is getting pretty narrow.

EDIT: .....And I just went and deleted all my links! The humanity! 
TopBottom

pinstripesc (New Admin) 2/26/2011 6:24 PM EST : RE: Last one - weird IE issue
pinstripesc
Posts: 4895
Zomgawsh Poster

That's it eh?
TopBottom

Mottie (MVP) 2/26/2011 11:34 PM EST : RE: Last one - weird IE issue
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Pinstripesc!

Well, the left zone is still set to 175px wide and the ul is set to 180px in the css. If you get rid of all the margins & padding, you'll still need to set the ul width to 135px to get it to fit. The main reason is that your side images are 13 px wide when only 3px is the actual border. There is also 3px on either side of the ContentBoxBody, and oddly the HTML I gave you makes it add the ContentBoxBody twice. So starting with 175 - 13x2 (side image widths) - 3x4 (ContentBoxBody x2 because there are two, then x2 again because it's right and left sides = 137. So, you can save 6px by changing the Content Box HTML to this (I removed the outside class).
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td style="width:13px;height:29px;background:url(http://www.axiomfiles.com/Files/42293/2011_brdr_topleft.png) no-repeat;"></td>
  <td style="height:29px;background:url(http://www.axiomfiles.com/Files/42293/2011_brdr_top.png) repeat-x;text-align:center;"><div class="ContentBoxTitleNoBackground">$block[title]&nbsp;</div></td>
  <td style="width:13px;height:29px;background:url(http://www.axiomfiles.com/Files/42293/2011_brdr_topright.png) no-repeat;"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td style="width:13px;background:transparent url(http://www.axiomfiles.com/Files/42293/2011_brdr_left.png) repeat-y;">&nbsp;</td>
  <td>$block[content]&nbsp;</td>
  <td style="width:13px;background:transparent url(http://www.axiomfiles.com/Files/42293/2011_brdr_right.png) repeat-y;">&nbsp;</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td style="width:13px;height:29px;background:url(http://www.axiomfiles.com/Files/42293/2011_brdr_btmleft.png) no-repeat;"></td>
  <td style="height:29px;background:url(http://www.axiomfiles.com/Files/42293/2011_brdr_btm.png) repeat-x;">&nbsp;</td>
  <td style="width:13px;height:29px;background:url(http://www.axiomfiles.com/Files/42293/2011_brdr_btmright.png) no-repeat;"></td>
</tr>
</table>
<br>
If you don't change the HTML, then set the ul width to around 135px. The modified css is below (all the margins and padding are set to zero as well). If you do change it then you can go for 140px (change the number in red). If 135-140 is still too narrow, then you'll have to make the left zone wider than 175px. Of course if you bump it up to 200px, you can add that 25px to the width and get to 165px.
 /* A few IE bug fixes */
 * ul#instruct, ul#instruct li ul { margin: 0; padding: 0; }
 * html ul#instruct li a { height: 100%; }
 * html ul#instruct ul li { margin-bottom: -1px; }
 * html ul#instruct ul li a { height: 100%; margin: 2px auto; }
 /* Some list and link styling */
 ul#instruct { list-style-type: none; margin: 0; cursor: pointer; width: 135px; text-indent:0 }
 ul#instruct li { margin: 0; padding: 0; cursor: pointer; text-indent:0 }
 ul#instruct ul li { border: 0px; margin: 2px 0; list-style-type: none; position: static;}
 ul#instruct ul li a { display: block; border: 0; padding: 0px; }
 ul#instruct ul li a:hover { background: #333333; }
 ul#instruct div { background:#333; margin-left:0; }
 h5.head { width:100%; font-size: 11px; cursor:pointer; }
 h5:hover { background: #333333; border: 0px; }
 h5.selected { background: #660000; }
 h5.important { color:#CC6600; #fc0; }
 h6.head { color:#CC6600; font-size: 12px; }
 #instruct .new { list-style-type:none; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/new.gif) no-repeat; margin-left:0px; padding-left:22px; }
 #instruct .update { list-style-type:none; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/update.gif) no-repeat; margin-left:0px; padding-left:22px; }
 /* Header links styling */
 h5.head {margin:0px;}
 .MessageSignature, .MessageToonContainer1 { display: none; }
TopBottom

pinstripesc (New Admin) 3/27/2011 7:00 AM EST : RE: Last one - weird IE issue
pinstripesc
Posts: 4895
Zomgawsh Poster

Cripes, it only took me a month to get around to messing with it. It's pretty narrow, but sizing down the text a little makes it work, and I don't have it in me to fiddle any further with it, baha.

Thanks Mottie!
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%