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..
Related
My code is available here:
https://drive.google.com/open?id=0B1sXI26Zssw2YUVueDdyUHlrVXM
The problem that I'm facing is that there's some space showing up between my navigation tabs, and I didn't have this problem before I used the 'display: inline' function to center my navigation. What can be done? I've tried using "negative pixel margins" but they don't seem to work at all (They did work in another sample navigation I was experimenting with).
Here's a screenshot of the output of the code.
Ok so I downloaded the files and tested it on my server, what I found was rather strange, but the space was only there when the code was on different lines, I ended up fixing it by putting all the <li> elements on one line. You can see the code here: https://gist.github.com/HoogleyB/87de68e1a74480d73150770885e25224
Try to set margin = 0 . If you are running your code on chrome, it adds additional padding and margin of about 8px on its own. So try to fix that.
Have you tried:
ul li{ margin-left:-6px; }
Hope it will helps you.
Just so you know, this bug is because you are using display: inline-block;
With inline-block, if your html has breakline between elements you will see a space.
To remove it there is a tricky css thing :
ul {
font-size: 0;
}
li {
font-size: 12px;
}
If you set the parent with a font-size 0 the space will disappear.
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 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; }
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
For some reason, the text labels are being pushed down below the input tags. Here is the link: http://jurbank.com/lightning-grader/ the issue is at the very bottom of the page click "Get Started!"
see if applying float:left; to your labels fixes it.
Edit
and the second radio button. It needs floated also.
PS nice site btw
You can use display:inline-block; on both the label and the input.
To make it work in IE7, you also add
zoom: 1;
*display:inline;