So I started tweaking the html/css of this page. Nothing fancy as far as I can see.
Now it looks completely wrong in Firefox (see for yourself) and fine in every other browser I can think of. The html has been validated by the W3 tool. I am mystified, has anyone ever come across this before?
You just need to clear the floats. Try adding this to your stylesheet:
table.layouttbl
{
clear: both;
}
This might help too.
Try clearing the float you put on your menu.
<table cellspacing="0 " cellpadding="0" class="layouttbl" style="clear: left;">
You can put it in an actual style rule, or add another element and attach the clear to that instead.
Add overflow: hidden to .page class in Site.css (line 108)
Add a new property: .layouttbl {float: left}
This fixes your issues in firefox. Make sure to check the site in other browsers as well.
Your menu div has no need to float, remove float from that #divMenu. Be careful since you're defining #divMenu in 2 different places
Related
The page I am working on is displaying perfectly in Chrome, Firefox, Opera and Safari (in both Mac and Windows) except in IE 7 & 8. The header is suppose to look like this:
but in IE it appears like this:
before we were using position: relative; for our class container in our charity.css file, but i had to remove that as it was creating problems in IE w/ my drop-down menus.
Can someone PLEASE help me?! I am so out of ideas now :(
Here is the [page] (however, i would have to remove the link later) Any help will be highly appreciated!!
Edited: here is the jsfiddle: http://jsfiddle.net/walahh/QwFL6/ it's not exactly the same page...but hopefully you will get the idea.
The only change I can think of would cause a somewhat significant change in your markup.
Basically, I'm pretty sure that this has to do with float:left and float:right elements not being cleared. IE is notorious for incorrectly propagating the float property to elements which weren't intended to be floated. To avoid this - when floating - it is common to do something like this...
CSS:
.fl { float: left; }
.fr { float: right; }
.clr { clear: both; }
And then doing this in your markup:
<div>
<div class="fl"></div>
<div class="fl"></div>
<div class="clr"></div><!-- This element stops float from going to unintended elements -->
</div>
This is ideally how you would position floated elements for cross browser support.
If reworking your markup isn't doable, you could try adding empty elements, with a clear: both; style, as the LAST SIBLING of floated elements. So...taking your ul#secondNav as an example you could try this...
<ul id="secondNav">
<li class="stuff"></li>
<li class="stuff"></li>
<li class="stuff"></li>
<li style="clear: both;"><!-- Leave empty --></li>
</ul>
So apparently the fix was pretty simple....i was making it way too complicated.
What I (also) didn't know was "In IE the z-index can not be higher than the contain element's z-index."
So I went back to the original file, where they had .container{width:940px; margin:0 auto; position: relative;} and left it as it is. Then added z-index values for the #header{.....; z-index:1; } and #mainNav{...; z-index:2;} And that took care of the...
hidden drop-down menu(s)
messed up header
here is the modified code: http://jsfiddle.net/walahh/QwFL6/3/
hope this helps someone :) and thank you everyone who took their time to read my post and help me.
i am having trouble with my new project. i code corectly if i say.
link of the website- which is having problem
This div is giving me tension
<div class="content-bottom"></div>
Edit:
After checking your code, I noticed that you understand the theory of floating and clearing, so I checked a bit more... It seems that you have unclosed </div> somewhere, thus rendering yout div.content-bottom on a different DOM level then after the div.content-middle.
Original answer:
It's because of the floating on your #content and #sidebar
You should use clear:both; for the .content-bottom div.
Read more about clearing and floating here: http://www.quirksmode.org/css/clearing.html
It goes wrong because you float the other elements within <div class="block>`
Set the css property clear: both; on the class content-bottom and it should work.
Just give float: left to .content-bottom class and it will solve your problem..
I have some html with js, css, etc that is fine with the exception that you cannot paste into the input boxes. There is nothing obvious to me as what is causing this. Now, I have found a semi-solution:
There is a line of code that looks like this:
*{margin:0; padding:0; overflow:hidden; }
If I remove that line OR just the overflow portion I can paste into the input boxes...However, it destroys the layout and formatting of the page.
Any suggestions would be greatly appreciated. Thank you.
You might want to think about some more specific styles. If overflow:hidden is causing this problem on your INPUTs then only use it on elements that you know for sure you want to prevent overflow. INPUTs generally need to have overflow visible to work right.
Try this?
*{margin:0; padding:0; }
DIV,HTML,BODY{overflow:hidden; }
I've added this twitter widged to one of the site's i manage and for some reason, in every browser but firefox it looks good but in firefox this happens
bam it jump to the side for no reason i solved this by putting overflow:hidden; to the class textwidget
but then everything is gone in the rest of the browsers?
could anyone help me find a solution for this.
All help is very much appreciated
p.s. the site can be found here
Popdrommen
After successfully defeating your popup window, I have come to a conclusion that something like this should help you:
.textwidget {
clear: both;
}
Best thing to do in my opinion, is create a div, set its size, and then apply the overflow:hidden attribute to it, (remember to position it relativly)
Then inside that div put the twitter stuff.
<div style="width:200px; height:500px; position:relative; overflow:hidden">
<!-- Twitter stuff here //-->
</div>
I have a weird problem here. On one of my websites running Joomla! is the login form - http://bohemia-kichijoji.com/index.php?option=com_user&view=login . What I have noticed, the login form is invisible in Firefox (tested on 4.0.)m but visible on other browsers. I have tried almost everything - went through CSS, HTML, run validation - nothing helped. Could you please tell me the reason, why this happens?
Thank you very much!
Looks like it's getting pushed outside the page, try this:
fieldset {
clear:left;
}
OR
table.contentpane {
float:none; /* or remove the float:left; */
}
There didn't seem to be any reason to float the table, so personally I'd use option 2.
You have a floating problem. The Element before your fieldset element which is table is floated left. you have not cleared you floats. There are many ways around this. You could use the overflow property on the form element or you could clear the float on the filedset element itself as follows.
fieldset {clear: left;}
Or do like this
form {overflow: auto;}
This will cause the fieldset element to appear in Firefox 4.0 and Firefox 4.0.1
It is because of using which is causing it to not display in Firefox.
You'll need to remove the fieldset for Firefox and see it it works..