Jump to content

Oh, Please. I Am About To Lose It.


Recommended Posts

My site: http://www.thespartana.netThe bottom right of the page (the two boxes right of my Twitter feed) are always in different positions depending on the browser. Also, IE just displays a jumble of text of the column on the bottom left of the page. Also, IE does not display my quote rotator (which should be below the heading "Hallway Voices."Please help. I am frustrated to tears.

Link to post
Share on other sites

I can't see the problems you mention. I've checked in three browsers and the site looks the same to me.Which browsers are you testing this in?Checking in Internet Explorer 7, I find that these hacks are likely resposible for the text collapsing:

* html .clearfloat {	height:1%;	}*+html .clearfloat {	height:1%;	}.clearfloat {	display:block;	}

I don't recommend the use of CSS hacks.

Edited by Ingolme
Link to post
Share on other sites
I can't see the problems you mention. I've checked in three browsers and the site looks the same to me.Which browsers are you testing this in?Checking in Internet Explorer 7, I find that these hacks are likely resposible for the text collapsing:
* html .clearfloat {	height:1%;	}*+html .clearfloat {	height:1%;	}.clearfloat {	display:block;	}

I don't recommend the use of CSS hacks.

I am testing it in Safari, IE, and Firefox. I removed those hacks and it does look much better in IE, but now it is all distorted in Safari and Firefox.Regardless of hacks or not, IE also "cuts" off the image I have in the bottom right of the box titled "Happening Now." It also pushes the "Hallway Voices" title out of the box.
Link to post
Share on other sites
I am testing it in Safari, IE, and Firefox. I removed those hacks and it does look much better in IE, but now it is all distorted in Safari and Firefox.Regardless of hacks or not, IE also "cuts" off the image I have in the bottom right of the box titled "Happening Now." It also pushes the "Hallway Voices" title out of the box.
The site looks fine for me in Firefox.IE pushes the "Hallway Voices" down because you have 3 <br /> elements. You shoudn't use <br> elements to position things in the page. That's what margins and paddings are for. Each browser gives <br> elements different height.The other problem seems to come from the fact that you didn't leave enough space for all the content. Try removing "height: 528px" from #headline
Link to post
Share on other sites

The site does not look fine in my FF browser. The whole page is aligned left, the navabr is cut short, and the logo is overlapped by the blank banner to its right.I'll fix the Hallway Voices stuff and let you know what happens, though. Thanks.

Link to post
Share on other sites

i find if you remove display:inline-block; from clearfloat then firefox realigns itself to the centre..clearfloat {display:inline-block;}but this cause's a problem (nav buttons missing, thick border appears at top of buttons) for IE nav menu, but by adding within the page <!--[if IE]><style type="text/css">#navbar {float:left;}</style><![endif]-->OR adding this within a IE specific external style sheet, this seems to fix the problem.The problem with the text overlapping at the bottom of left column, seems to relate the font used, and font-size, as it seems some browsers ignore this font, and assigns another instead, also the font-size is different between browsers (may relate to different alternative fonts used)i found that if you use#front-list .title, #archive .title { font:15px "Century Gothic", Verdana, Arial, sans-serif; letter-spacing:-0.05em; }that is fixes this problem (if the user has not got "Century Gothic" on their O/S, it will use the alternatives listed)tested on, Firefox, Opera, Windows Safari, IE6 and IE7, and Chrome.hope this helps

Edited by dsonesuk
Link to post
Share on other sites

@dsonesukYour solutions worked. Thanks so much.@IngolmeI still have height issues. I deleted the <br>s and everything was fine, but when I deleted the height, it made the whole module taller in IE and shorter in FF. Plus, that bottom picture is still cut off. I understand it's cut off because it is interfering with the padding of the element above it. So how do I push that "quoted" picture down then? Thanks.

Link to post
Share on other sites

option(1) add/increase height of #headline (think you mentioned that you removed height) option(2)increase bottom paddingthen amend background from:background:#FFFFFF url(http://thespartana.net/wp-content/themes/arthemia/images/headlinebackground.jpg) repeat scroll 0 0;to:background:#FFFFFF url(http://thespartana.net/wp-content/themes/arthemia/images/headlinebackground.jpg) no-repeat scroll right bottom;basically positioning background image to right and bottom, and turning of repeating image(dont think you need this)also it might be good idea to set height or min-height of .category to about 70px;

Edited by dsonesuk
Link to post
Share on other sites

Unfortunately, that still doesn't work. I don't know if you know, but I was foolish and designed that "quoted" picture on a white background the size of the whole module (it's just in the corner of a largely white .jpg). Also, setting the new height of .category was ineffective.

Link to post
Share on other sites

i know you used large image to fill module, but in this case "size really! does not matter" you could have used the image without white background, and use background-position to position it "bottom, top, center, left, right or inherit".changes i made which work in all browsers.category { width:98px; float:left; border-bottom:1px dotted #ccc; border-top:1px dotted #ccc; margin-bottom:10px; padding:5px 10px 10px 10px; background:#fff; height: 70px; }#quotearea { height: 80px!important;} /*increased height allows for large content and prevents column height jumping up and down*/#headline { width:590px; height:548px; float:left; background:#fff url(http://thespartana.net/wp-content/themes/arthemia/images/headlinebackground.jpg) no-repeat right bottom; padding:10px; font-size:1.05em; line-height:1.5em; margin-right:10px; border-bottom:8px solid #333333; border-left:1px solid #333333; border-right:1px solid #333333; border-top:1px solid #333333; padding-bottom:30px; }EDIT Note: you will have to remove the <br />, which cause ads to show below bottom edge in IE only, and adjust height to above

Edited by dsonesuk
Link to post
Share on other sites

No i tried that, something is taken precidence over .category p and .category a, by directly accessing the paragarph, and using !important within the declaration, it will take control of that elements paragrapgh setting only.Use exactly as shown: .category a p {padding-bottom: 0 !important;}

Edited by dsonesuk
Link to post
Share on other sites

First of all, thanks for your patience with me. Second, here's what it looks like in each of my browsers.Firefox:http://img210.imageshack.us/img210/6163/firefoxx.jpgSafari:http://img265.imageshack.us/img265/8158/safarif.jpgInternet Explorer:http://img30.imageshack.us/img30/9650/62976734.png

Link to post
Share on other sites

problem solved, enclose images in div<div class="middle_img"><img src="http://thespartana.net/wp-content/themes/arthemia/images/arrow.jpg" width="13px" height="10px" alt="" /><img src="http://thespartana.net/wp-content/themes/arthemia/images/everythingelse.gif" width="110px" height="11px" alt="" /></div>and insert into stylesheet .middle_img {margin-bottom: 5px;}

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...