turtle Posted August 20, 2009 Share Posted August 20, 2009 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 comment Share on other sites More sharing options...
Ingolme Posted August 20, 2009 Share Posted August 20, 2009 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. Link to comment Share on other sites More sharing options...
turtle Posted August 20, 2009 Author Share Posted August 20, 2009 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 comment Share on other sites More sharing options...
Ingolme Posted August 20, 2009 Share Posted August 20, 2009 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 comment Share on other sites More sharing options...
turtle Posted August 20, 2009 Author Share Posted August 20, 2009 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 comment Share on other sites More sharing options...
dsonesuk Posted August 21, 2009 Share Posted August 21, 2009 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 Link to comment Share on other sites More sharing options...
turtle Posted August 21, 2009 Author Share Posted August 21, 2009 Thanks a lot. As always, my work won't start until after 2 a.m., so I'll let you know how it goes. Link to comment Share on other sites More sharing options...
turtle Posted August 21, 2009 Author Share Posted August 21, 2009 @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 comment Share on other sites More sharing options...
dsonesuk Posted August 21, 2009 Share Posted August 21, 2009 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; Link to comment Share on other sites More sharing options...
turtle Posted August 21, 2009 Author Share Posted August 21, 2009 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 comment Share on other sites More sharing options...
dsonesuk Posted August 21, 2009 Share Posted August 21, 2009 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 Link to comment Share on other sites More sharing options...
turtle Posted August 21, 2009 Author Share Posted August 21, 2009 It looks just about right in IE now, except for a space above "Hallway Voices." I checked and there is no <br>. Is this something I'm going to have to just live with? Link to comment Share on other sites More sharing options...
turtle Posted August 21, 2009 Author Share Posted August 21, 2009 Oh and now there's not even a quote rotator in FF. FML. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 21, 2009 Share Posted August 21, 2009 i've noticed the category paragraphs, have padding on the bottom, which extents beyond the dotted border when hovered over.you can fix this by increasing the height of the .categoryorcreate another selector .category a p {padding-bottom: 0 !important} Link to comment Share on other sites More sharing options...
turtle Posted August 21, 2009 Author Share Posted August 21, 2009 Do oyu mean adding padding-bottom:0px to.category a {and.category p {I tried that and nothing changed. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 21, 2009 Share Posted August 21, 2009 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;} Link to comment Share on other sites More sharing options...
turtle Posted August 21, 2009 Author Share Posted August 21, 2009 I added that exact line to the CSS file and, well, I don't see a difference. Maybe I'll just have to live with it as it is. I don't know. Link to comment Share on other sites More sharing options...
turtle Posted August 22, 2009 Author Share Posted August 22, 2009 Any suggestions? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 22, 2009 Share Posted August 22, 2009 ?? It works see below: before:after:unless you want suggestions for something else? Link to comment Share on other sites More sharing options...
turtle Posted August 22, 2009 Author Share Posted August 22, 2009 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 comment Share on other sites More sharing options...
dsonesuk Posted August 22, 2009 Share Posted August 22, 2009 this is strange, i've got copy of your page with all links, but with my style.css and it looks fine on my server in safari. I just did a comparison of style sheets, and made sure they are the same, but they still produce different results? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 22, 2009 Share Posted August 22, 2009 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 comment Share on other sites More sharing options...
idk11 Posted August 22, 2009 Share Posted August 22, 2009 Great. That fixes the odd placement of Everything Else in Safari. Still, however, the Hallway Voices has way too much excess space. I just want to make it so that #headline matches the height of Latest Issue/HHS OnDemand again. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 22, 2009 Share Posted August 22, 2009 Clue Here, adjust heights until they match, no brainer? Link to comment Share on other sites More sharing options...
idk11 Posted August 22, 2009 Share Posted August 22, 2009 Haha. I wish it were that easy. It all goes back to my original problem: Safari and Firefox allow the heights to match with no distortion, but, in IE, the "quoted picture" is cut off when the heights match. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.