for some reason my checkboxes will not work inside some divs.
They cant be checked and are around half the size they normally are...
They work in firefox, but not chrome and they dont even show in safari...
This is not a live site so cant give a link, but its just a basic checkbox code.
I have had a look around the css of the containing div etc but nothing seems out of place.
Any suggestions on what i could look for? Sorry if theres a lack of information.
Take a look at the computed style tab in the source view of chrome by pressing f12. You can then see all the styles that are applied to it and also add new styles. Experiment with it till you get the wanted result. Also, you can use jsfiddle.com for posting bigger blocks of code.
Cheers!
Related
I have a strange behavior with drop down lists and button in my layout.
I have just made a fiddle here to illustrate how this looks like.
As you can see in the example, if you resize the browser the you can still open the lists or click on the Filter button which is ok.
When I do the same on my desktop, the first list will work properly, but the second and third list will not open as well the button in not clickable anymore.
I have spent the all day trying to fix this issue, unfortunately with no success at all.
Maybe someone of you guys have had the same issue or knows what is going on here?
Any help will be much appreciated.
I've encountered issue like that before when wrapper elements were stretching over other elements via zindex and couldn't track it down until i gave each element a background color and could see how they were transforming in size as i adjusted the window size.
On my home page in ie for some reason it makes a line about 3px high right about the content and right below the bread crumb bar. example.
Second problem, is that it also makes a box on this page
example
On the second example it messes with the user photo moves it into a box that should not be there. Along with the follow forum button. Which should be right below in the box as well. To see how it should look check those pages in any browser but ie. I really could use a fix for this. If its a css thing i have a ie specific css file i can put code in i just cant figure out what i need to put in there.
Also can someone check it out in ie 8 because i don't have it anymore and if there is a different fix maby you could help with that as well.
Looks like you have something going on that's changing your HTML or your DOM based on the browser. Likely you either have some client or server side code that manipulating things in a browser-variant way.
For example, in IE you have two DIVs with ID "boardindex", but I only see one in Chrome. Use F12 and/or Firebug to further investigate the differences. Isolate the code that's causing the differences using a binary search method if necessary.
I'm having an odd problem with some floated divs on this page that I'm working on. There are 3 of them across the page, with 1em margins between. In Chrome they line up perfectly, but in IE and FF, the right hand one drops a little - but not all the way below. I thought this might be best described with a picture, please see below:
I can't work out which bit of the CSS is causing this - I've been through the new FF code inspector and highlighted all block level objects with the webdev toolbar but can't see anything that would cause such a drop.
I did wonder if it was something within the JS twitter feed causing it, but I've swapped round the Twitter and "Update" boxes and it's always the right-hand one. I've also tried removing additional elements from the page - everything between the menu and these three boxes.
I must admit, I'm at my wit's end! Can anyone spot something obvious I've missed? The CSS is fairly large, and I'm not sure which bit to show, so I haven't copied it in in, but will do if anyone desires. Otherwise everything can be viewed at http://www.woodexperts.com
Change width: 15.25em in div#main div.tricolumn to width: 15.24em
That should take care of the issue.
I understand that this is a hack, but if IE is the only browser causing problems, you might want to consider IE conditional comments that restrict certain styles only for IE:
http://msdn.microsoft.com/en-us/library/ie/ms537512(v=vs.85).aspx
I have this CSS Menu. It's fully functional.
But when I put it in my page inside some table cell, it blows up like this. Don't mind the silver and the blue lines, they are from the page.
Now I have debugged the page and the menu itself. No error still this weird behavior. Then I got another menu and put that in here and it showed the same error. Any idea why is this happening?
I could paste the code but I don't think anybody is going to go through 500 lines of HTML and 100 lines of CSS.
I am using the latest Firefox. IE6 shows the same behavior.
check the code here...
CSS Menu Independent in a page
CSS Menu Inside a complex page
Your "in-place" stylesheet is much longer than your "minimum" one, and contains rules that are changing the layout. In particular, do a search for "280" -- you're setting some widths to that.
In some browsers, tables get some default styles that are not what you expect. I can't recall right now, but I think one of them was align="centre" by default.
Maybe try setting the table attributes to what you want them to be explicitly?
W3Schools for table attributes.
I have a simple textarea which works in all browsers i.e. I can click inside it and type.
But I can't do this with IE6! I am however, able to press the tab key until I get to the textarea and then I can type in it. But I cannot click it.
What a strange quirk? Anyone know what the hell is going on?!
The source of my form can been found here.
Thanks all for any help
Update
Here is the CSS. Nothing jumps out at me.
Update 2
Annoying, I have narrowed down the problem to this line:
background-image:url(../../images/checkout_fuzzy.png);
I use this setup for all my sites pages, but this is the first page that has text areas in it so I guess that might be the reason why it doesn't like the above. What possible could I change the above to so that it doesn't overlay the textarea.
Solved
A position:relative on the containing div solved my IE6 problem! The problem was that the text area was not clickable due to something (div) covering the textareas as identified by Chris.
I don't know what's going on but I have some thoughts that may or may not be the problem. I would hazard a guess that it might be stylesheet related. Its possible in HTML to have something invisible in front of a form element that stops it receiving a click but I would think that wouldn't stop the input getting tabbed to.
To test if this is the case see if you get the same problem if you don't reference your stylesheet at all. If this allows you to click its something to do with your CSS/layout. If you still can't click then I'd probably try turning javascript off on your browser and seeing what difference that makes...
The HTML looks totally fine to me at a glance but I of course can't see what your CSS and/or javascript might be doing on the page. Best of luck. :)
Not 100% sure if this will fix it, but try setting the 'cols' attribute in the textarea.
Here's an example.
<textarea rows="2" cols="20"></textarea>
IE6 can be a bit fidgety if it doesn't get what it expects.
I don't have a copy of ie6 handy but I do know that ie6 can get real funky with absolute and relative positioning. try commenting out your absolutely and relatively positioned CSS styles and see if any of them are covering your form.