Will pay if you can fix this tiny CSS problem

The offending page is http://www.misohoni.com/bba/

When you look in Firefox you can see when graphic banners show up - they float to the middle of the page. I checked the size and everything looks ok esp when Google Ads the same size appear ok...

I know it's something to do with the CSS but can't work out what it is.

I can supply the code and css to anyone who wants to do it, I can pay by Paypal. Let me know by message or on this topic.

Thanks

 

ewww....that's odd...I'll have a look at it.

btw, here's the css link for the lazy among us: http://www.misohoni.com/bba/style.css

 

Must...resist...mentioning...tables.....

heh

Sorry, I couldn't resist. I tried a redesign from tables to css (for positioning, not formatting). After a bunch of research I found that the CSS zealots consider a 3 column layout with a fluid middle column a great achievement rather than a 3 minute triviality. I even saw some Javascript suggestions just to get a simple footer working!

Here's a great article from the cantankerous jwz (of the original Netscape fame) on the vagaries of CSS http://www.livejournal.com/users/jwz/193866.html

Choice quotes:

Ok, I've got that off my chest now!

 

rickbender1940: i hear you man!

i have this geek as a friend that is up to the latest news and makes a habbit of learning the latest (and most useless) of technologies.

Last time i asked him he told me that i should completely redesign my entire site from using tables to using css.

the arguments were that the pages won't load all at once (as they do right now), but the text will load first and the images fill start to fill in one at a time.

the cost for this was around $5000

i think i'll pass.

Anyway, i strayed from the subject. misohoni i'll look at the problem and see if i can do something.....

 

just a quick note: the problem aslo appears in Opera, not only in Firefox.

I can assume from the code i saw that the offending line is that:
<noscript><a href='http://misohoni.com/phpadsnew/adclick.php?n=ac11965c' target='_blank'><img src='http://misohoni.com/phpadsnew/adview.php?clientid=1&amp;n=ac11965c' border='0' alt=''></a></noscript>

Anyway, i'm gonna give you acode that will correct the problem regardless of how you display that banner:

Try something like:


<span style='position: absolute; left: 300; top: 100;'>
whatever code you have that's displaying the banner
</span>


Let me know if that helped....

 

Misohoni

The page is suffering a bit from 'divitis' - you can achieve the same layout with fewer <divs> and much less in the css file. Anyhow your problem is the 'subnav' and 'subnav2' <divs> are not defined in the css and are being repositioned 'correctly' because of the left floated 'headwrap' <div>. IE displays as you intended because of the f*!<ed up box model it uses. I always find it useful to get it right in Firefox (most standards compliant browser currently) and then tweak for the shortcomings of IE afterwards.

Mick

 

I will tell you exactly what your problem is. Before that, though, let me tell you that, for your own sake, you need to change your DOCTYPE to be HTML/transitional - your so called XHTML isn't even close to be even transitional HTML. I'm surprised browsers can even parse it, that's how much it is malformed.

Anyway, back to your problem. It's simple. You have to realize that in the presence of a float, block elements (e.g. div's p's, etc) are created as if the float doesn't exist. Inline content, on the other hand, is shifted by floats to the left, right or downwards, depending on the kind of a float it is and how much space is around it.

In style.css, you have this CSS rule: #subnav A {display : block;...}

Since <a> is a block, it goes right underneath the float. Its content, however, the img element is an inline element and cannot stay underneath the float, so it's shifted down.

Do a small experiment, find this style I quoted and add "margin-left: 300px;". You will how your image jumps up to the right of the float. This is not a fix, though - just something for you to see what's going on.

If you want to fix it well, you would need to redesign the whole header (or better yet the whole page). If you just want to hack it, you can fiddle margins and paddings on the anchor and the image.

J.D.

 

Thanks guys for all the tips and sorry for lateness in getting back - it's the HK time difference I think. I'll go through each one and see if it does the job or not, then contact you about Paypal...

Cheers

 

Hi Nicky, thanks for helping. Nope that tag you gave moved the bottom bar upto the top, overlapping the google ads (in both Firefox and IE).

I attach a screenshot below:

 

Yep you are right, the offending code is below. If anyone could help with the tidy up of the code please let me know by message again I can Paypal across, and I can send you the original (X)HTML Coding:

<div id="header">
<div id="headwrap">
<h1>Best Blogs in Asia</h1>
</div>
<div id="subnav">
<div style="margin-left: 2em">
<script language='JavaScript' type='text/javascript'>
<!--
PHPADS INFO
//-->
</script><noscript><a href='http://misohoni.com/phpadsnew/adclick.php?n=ac11965c' target='_blank'><img src='http://misohoni.com/phpadsnew/adview.php?clientid=1&amp;n=ac11965c' border='0' alt=''></a></noscript>

</div>
</div>
<div id="subnav2">
<UL>
<LI id=s1><A href="http://www.misohoni.com/bba/" title="Best Blogs in Asia Directory">Directory</A>
</LI>
<LI id=s2><A href="about.php" title="About Best Blogs in Asia">About</A>
</LI>
<LI id=s3><A href="design_blog.php" title="Need Web Design for your Blog?">Need
Design?</A></LI>
<LI id=s4><A href="blog_submit.php" title="Blog Submit Tools">Blog Submit
Tools</A></LI>
</UL>
</div>
</div>

 

Thanks for the help, although I can't really get my head around the solution.

Should I make :
#subnav img {display : block;...}

That will turn the image into a block? I attach a screenshot in Firefox of your suggestion. I think it's to do with UL and LI also, but again too complex for me to handle.

If anyone wants to work on the original source code I can forward it on...and if you can fix the (X)HTML errors also and too mayn DIV tags, as noted in previous comments.

I've been having this problem for months and a bit annoying not to fix it!

 

As I said, it wasn't a fix - my post was just to help you understand what the problem is. Here's what you need to fix your page.

1. Fix DOCTYPE. If you want to stay with XHTML, change all tags and attributes to lower case - XHTML must be in lower case. Close all tags (I saw some img tags without the end tag). Better yet, given the state of the page, just change DOCTYPE to HTML/transitional and remove all XML stuff (CDATA, tag endings, etc).

2. Regarding your problem. Design your page with tables. Most of what bad things you heard about tables is a myth - HTML and CSS are designed to work together. See the end of my thread Why I don't like tables for some details on this.

If anyone is compelled to comment on tables vs div, I suggest you do this on *that* thread.

I'm sure with tables you will be able to fix your header within an hour or so.

3. Don't use doctype.write. This is one of the reasons you cannot solve this problem by yourself - it isn't very easy to deal with its output. On top of that it may not be secure (I'm not saying it isn't, but it's doctype is a common source of cross-site scripting attacks). Just use your PHP code instead to generate the anchor and the image reference.

J.D.

 

Sorry but I only want to change the part I indicated and I want to stick with Divs/XHTML...but I know this is difficult work - although I don't know how to do it, that's why I'll pay someone to help with this prob...

Thanks guys so far for your help...

 

I said to include the offending code in thes tag:

<span style='position: absolute; left: 300; top: 100;'>

Now play with the coordinates! try less tha 300, more than 300, less than 100, more than 100

play with it until you move it into the right poisition!

 

Nope still didn't work, placed around the script and noscript tags and modified them for a while - still no luck

 

Can anyone help? I thank the guy above for their tips, but still didn't work. I had a guy who emailed me from this forum - but after giving him the code haven't heard from him since...

Can anyone with CSS skills help out? Still Paypal payment for you...

 

Can you please send me the source code too? use office at crea-soft dot com.

Also: instead of span try using div. Just an idea. I'll tell you something for sure when i can see the sources...

 

thanks code on the way...

 

Misohoni

If you're just after a hack then adding the following to your css will solve the problem. I would be inclined to revisit the design and pare it down to the essentials to deliver your layout. It would then make it easier to pick up other issues and amend later.

div#subnav {
float:right;
margin: -100px 0;
padding: 0;
}
div#subnav img{
margin: 100px 0 0 -318px;
padding: 0;
}
div#subnav2 {
float:right;
margin: -30px 0;
padding: 0;
}

Code (markup):

Mick

 

I had a problem with CSS and Firefox when I was placing a Google skyscraper ad, even though the <div> was within a table column. The solution was to set the div height and width to match the skyscraper ad size.

Take a look at this page, then take a look at the associated css file, main.css. The div name is "box-ad".