zeniph

And why do the page titles start so far down the sidebar in IE, but not in FF?

thats fairly easy – there seems to be some extra H2 and incorrectly nested LI tags in the sidebar code. Have to be careful if using widgets to add – extra hidden lines etc can get added.

header seems “scaled” correctly in FF, but is displaying a little gap to the right of the header image in IE?

This might be a little harder to fix as will sort of relate to your background header image solution also.

#header{
width:769px;
border-width:3px 2px;
}

When rendering an object IE will enforce the declared width and force any borders to be within that width. Firefox does the opposite – it takes the declared width and adds on declared border widths (and margins and paddding).

You could either add another wrapper div to #header without borders and apply the width to that – #header would then figure out its width automatically in both browsers.

Or simplest might be to remove the borders all together and add the border effect to all of you randomised header bg images – same as has been done for #page with this image
https://67.199.126.56/wp-content/themes/tinmountain/images/kubrickbgwide.jpg

hope that all helps!

maybe just try saving your images again – they dont show up at all when browsed directly in IE (from server or locally) so its not related to any IE CSS quirk.

Also the images file sizes are huge – they could be under 100k without any quality issues

No spedific reason for it being that way – just how the original author decided to write it back in 2005 – far as I know its not really been updated since. By segregating it into logical sections he’s also unfortunately left some redundancy and duplication within it.

Just because wordpress ships with it as default doesnt mean anything about it being best practice for CSS (though there’s nothing technically wrong with doing it that way).

Do a search – theres several variations and improvements on it that might suit your purposes.

more of a trying force a square peg into round hole than an IE issue really.

The issue is with the CSS for cforms contact form in the sidebar. The sidebar is set to 350px wide and the form is set to 450px wide.

The 2 lines below containing width:450px are the cause. Change width attribute to something smaller or perhaps even delete it.

.cform {
margin:10px 0pt 0pt;
width:450px;
}

.linklove {
margin:6px 0pt 10px !important;
padding:0pt !important;
text-align:left !important;
width:450px;
}

note that these are not from the main theme css but will be found inside the cforms pluggin folder.

Or just remove the contact form entirely – you dont really need it on every page.

the exact answer will depend on the theme you’re using – many have these items hardcoded in.

if the theme supports it you can you add extra items such as these via the widgets section on the wp backend

there a many many CSS techniques you could use to avoid the table and image slices – but I understand its easier to sometimes to work with what you’ve got.

it seems you have removed an extra return as it now works in IE however the prob remains in Firefox.

to resolve you need to add this style attribute to the table:

line-height:0px

The links sre rendered as inline text, giving them the default line-height and causing your line.

there’s the “you could use CSS and a single background image and make a much cleaner solution” answer…

or if you stick with the table I think you need to remove an extra carriage return in the A tag inside the last TD.

z

it isnt a “typical” tutorial page I guess!

view the source of that page – and read the text

check out this
https://www.cssplay.co.uk/layouts/fixed.html

whoops – scratch that

#name-of-div{
 position:fixed;
 bottom:0;
 text-align:right;
}

will work – but not for IE6…. will get back to you if I get a spare moment to look at further

the basic CSS is

#name-of-div{
 position:absolute;
 bottom:0;
 text-align:right;
}

then just insert your image tag in that DIV.

cant remember exactly why (some IE6 quirk) but I ended up using bottom:-1px to make it work cross browser – which forces a vertical scroll bar to appear in firefox unfortunately

not a solution as such but you can rename your theme folder to “default”

you’ve got 2 closing

</body>
</html>

tags at the bottom.

I suspect you may also have some other unclosed divs as well – fix these issues before focussing on the CSS. The extra space is quite possibly being caused by incorrect HTML markup.

in style.css line 383

change

img, .alignleft {
 float:left;
 padding:0 5px 5px 0;
}

to

.alignleft {
 float:left;
 padding:0 5px 5px 0;
}

your css is making all images float left regardless of what you did to them

no still no good – please just check you sidebar code thoroughly.

you have some stray closing </div>s messing things up and you still have <div> tags imeadiately inside your UL. The only things that can go imeadiately after UL is an LI tag. Inside LI you can place (nearly) whatever you want.

further to what Saurus said, your basic structure should be:

<div id="sidebar">
  <ul id="sidelist">
  <li> <div class="sidebardivs"><H3>heading</H3>images, forms, more UL, LI whatever </div> </li>
  <li> blah </li>
  <li> blah </li>
  </ul>
</div>