I am encountering a strange problem in css. You can see the form with checkbox here. The text with checkbox is not aligned properly. It splits into two lines. It is working fine on FF, IE, Chromium on Linux and opera but not on chrome on windows 7.
Now here is funny part. Right click any feeling for eg. Must Watch and inspect element.
This is the first matched CSS rule
.addCheckbox label, .addRadio label {
font-size: 15px;
}
Edit this and add display:block.
So the new css will be
.addCheckbox label, .addRadio label {
font-size: 15px;
display: block;
}
Now disable the newly added CSS by unchecking display:block and voila you can see the form perfectly rendered.
So i am getting different rendering with same CSS. Anyone have any clue how to fix this ?
The same CSS was working fine initially with chrome on windows 7 until someone pointed it out recently.
Browser info: Chrome 24.0.1312.57 on Windows 7
Remove float:left from checkbox class, I think it is not needed here.
And adjust Label tag with margin-left.
Also, from this class: .radio.inline, .checkbox.inline... try removing display: inline-block and control the li and span with padding and margin. For remember me, try using display: block for the Label of Remember me.
Hope it helps.
Related
When viewing the following navbar with the Chrome element inspector, the highlighted elements are not where the actual elements are rendered. Why exactly is this happening?
https://codepen.io/bbbenji/pen/OodrJr (sorry, too much code to post here)
This only happens in Chrome on both Linux and Windows. Firefox does not have this issue.
Too much code to post on Stackoverflow.
Codepen link provided above.
I found out that #DIV_5 { display: -webkit-box; } (which is causing the problem) is supposed to be some predecessor of display: flex;. It's prefixed with -webkit- so it targets only Chrome like browsers. I'm pretty sure what it does it is trying to use some older spec, but that spec doesn't work well with #DIV_6 { float: left; } and make even the inspector buggy.
I am working on a form for a company that still uses tables and they want me to add CSS to their template without changing any HTML/JS. There is a nested input(CheckBox) that should be selected when a user clicks the image. This is working fine in Chrome, Firefox, and Edge but in IE when the image is clicked it will not check the box. Below is a screen cap of the DOM and an actual choice in the browser.
I changed the background color of the font tag to distinguish it from the image and added a border around the td. I noticed 2 strange things.
When the font tag is clicked it will check the box.
When the box is checked, I am able to click the image and have the checkbox
de-selected. Once it is, I can not re-select it by clicking the image.
Any idea of what is causing this and what can be done? I am using IE 11.
It appears that IE has a bug which causes this problem. I found some helpful information from this site:
https://snook.ca/archives/javascript/using_images_as
The CSS fix was:
label img{
pointer-events: none;
}
label{
display: inline-block;
}
I have 2 display rules that i can't get to work
I can't use the display property with IE version < 10, i'm using this code:
Comments(<fb:comments-count href="http://mypage"/></fb:comments-count>)
That results in:
Comments(<fb:comments-count href="http://mypage" fb-xfbml-state="rendered" class=" fb_comments_count_zero">
<span class="fb_comments_count">
10
</span>
</fb:comments-count>)
With this css:
.fb_comments_count {
display: inline;
}
.fb_comments_count_zero {
display: inline;
}
It displays:
Comments(
10
)
instead of
Comments(10)
I tried also changing
display:inline
to
display:inline-block
But it's not working.
The other issue i'm having is when i use display:none. In fact, IE<10 doesn't hide what i'm styling, but IE10, chrome, opera and firefox don't have that problem.
How can i fix this?
P.S. I prefer not to use JavaScript, because i want my site to look good even if javascript is disabled.
You're using dashes instead of underscores in your CSS.
.fb-comments-count {
display: inline;
}
Try changing it to:
.fb_comments_count {
display: inline;
}
Internet Explorer will not style any element it is not aware of. That is why there is a HTML5 shim javascript; to inform IE of the new HTML5 elements (insert them into the DOM). Other browsers won't have this issue.
Im not entirely sure how FBML gets rendered in the end, but older IEs don't recognize custom tags and won't apply css to them, so this might be the issue. You need to "register" the tags to the IE.
Also you should avoid the linebreaks in your span:
<span class="fb_comments_count">10</span>
this already might fix your first problem, if not try to apply white-space:nowrap;.
ie has always had a problem with braking lines where it should not try adding this to your css
white-space:nowrap;
If that does not work then please tell me what happens.
I have had these problems before with ie so it not just you.
also try wrapping your fb tag in a p tag then add a style of choice to the p tag.
I have two anchors containing a div that has a transition on hover but it takes me some patience to actually open the link. And I can't figure why not.
I tried the same thing using a redirect to page with javascript on div, but I still have the same problem.
#socialbuttons a {
display: block; /*added*/
height: 64px;
width: 54px;
}
Adding display: block; the facebook link works,
then you have to fix the other class for nice display.
Finally: HTML 4.01 specifies that elements may only contain inline elements. A is a block element, so it may not appear inside an .
EDIT:
#socialbuttons div:first-child {
margin-left: 20px /* REMOVE THIS */;
}
#socialbuttons a {
display: inline-block;
}
remove (or put it on the anchor)
#socialbuttons div:first-child {
margin-left: 20px;
}
now apply the hover rule to the surrounding anchor
#socialbuttons a:hover div {
...
}
I haven't tried this but this should solve the flickering when the div turns and is no longer under the cursor.
Let me know if this still does not work.
I may have found the reason why Chrome + LastPass is behaving this way.
I uninstalled Chrome and all it's extenssions.
Then installed an earlier version of Chrome, ver 13, and an earlier version of LastPass (1.9) with the LastPass Installer.
I tired the Chrome extension route to install LastPass but it gave an error as it wanted the latest version of Chrome.
Don't know why but when I checked LastPass "About" it now shows 2.0.0 version. Did it upgrade itself?.
With that new combination the browser seems to working OK with external links.
I say 'seems' as I have had immediate success with different browser/extension combinations only to have the browser revert back to problem with certin links and after so much usage: none of which I could identify.
I'll monitor this setup for another couple of days and install a few other extentions.
If my susspicion holds it will be a problem not using the latest version of CHrome for security reasons and that I won't be able to install the latest extensions. Bummer.
Site in question:
http://www.sedulity.tk/
Site using Chrome 19 dev:
Site using IE9:
as you can see on the homepage using IE it seems like it not recognizing the height of the DIV of each picture, whereas on chrome and firefox there is no issue.
I think this is probably my fault, won't blame IE for it...but I can't figure it out :|
In your css folder there is a css file ie7style.css and it's being used for ie (I've tested in ie8) and it has a class (.item-image) that is
.item-image{
height:142px;
}
Try to fix it or just remove it.
Css file: http://www.sedulity.tk/wp-content/themes/DeepFocus/css/ie7style.css
See in this developer Tool screenshot I've removed the css entry height:142px from class (.item-image) from file ie7style.css
After that (without .item-image{height:142px} in file ie7style.css) see the page in ie8
Try adding a height to the .item
CSS
#portfolio-items .item {
height:500px;
}
you might wanna check this article for a cross-browser inline-block that doesn't overlap. your case is most likely caused by the "baseline", where the next set of elements base their tops on the last elements' baseline (which would be somewhere in the middle of the element).