why with #tailwindcss/forms plugin border responsive doesn't work? border work fine
<div class="border"></div>
but md:border or lg:border doesn't work.
<div class="md:border"></div>
Can you explane me why?
Thanks
It's hard to say given what you've provided. I believe there's a default border applied with the forms plugin, but it should only affect form elements.
You could try
<div class="border-0 md:border"></div>
to deactivate the border on smaller breakpoints. That would show you if there's a default border coming from somewhere else - unless it's CSS with a more specific selector. (It that works I'd recommend hunting down the CSS that's causing that default border.)
Related
I am trying to replicate my Fiddle I have here on the website I am working on, but seems with the WidgetKit for Joomla the coding or CSS is effecting it. Fiddle is here: [http://jsfiddle.net/vZNj7/44/]
<div class="brand-wrap-bg">
<div class="image-cropper-brand" style="background-image: url('http://www.kanzenint.com/nkliq.com.au/nkliqjoom3/images/untitled-1_03.jpg');"> </div>
<div class="brand-text">This is where the overview text is going to be</div>
</div>
This is my template so far: http://www.kanzenint.com/nkliq.com.au/nkliqjoom3/index.php/k2-users/k2-extra-fields/k2-extra-field-groups/k2-media-manager/k2-information/brand-story
You wont be able to see the DIV, but its under the top menu DIV at the moment (purposely as I want the background under the header)).
I also want to make it so that the browser window will crop the bottom if the window is resized or for people who have different window sizes.
I have been trying to work out why I cannot get it to work. Close to 5am and nesrly given up :(. Thanks a lot for any help.
I have worked it out after getting onto a Win8.1 machine and using the devtools on IE11 since the previous versions are such a piece of crap and next to not usable.
I was using the 'initial' for position but seems that IE does not like 'initial' and doesnt recognise it? So I used 'Static' instead and seems to get it to work.
The reason I needed to revert back to it as Widgetkit was using inline styles that couldnt be removed (well they probably could but I couldnt see it in the template) so the inline styles needed to be basically reverted back to a default value.
Hopefully this helps someone even though no one helped me :(
I am pretty good with css, but can't figure out why my menu is being destroyed by IE7. Looks perfect in all other browsers I tested. First image link is correct. Second image link is how it looks in IE7.
http://www.asingularcreation.com/Forums/download/file.php?id=8368&mode=view/ie8+.jpg
http://www.asingularcreation.com/Forums/download/file.php?id=8367&mode=view/ie7.jpg
Here is the page: http://www.asingularcreation.com/calls-to-artists.php. Any help would be greatly appreciated.
You do not need to float (or clear) the menu container. It looks like it is causing IE7 to calculate the width incorrectly which forces the menu to flow down, underneath the sub-menu.
<div style="height:40px; line-height:40px; float:left; clear:both"><!--Main Menu --></div>
Removing the float and clear properties fixes the display in IE7 and also still works in Chrome and IE8 and IE9.
There is a lot of inline styles in the example page so I would also look at moving the CSS into an external file if possible.
I have some css used on a wordpress site. It looks as it should in chrome/safari etc but typically not correct in IE8.
The div has a background colour and moz-border-radius used for the border.The border is not important however the background colour only extends part of the way, or in the case of IE8, not at all.
Example: http://mesirow.btg340.co.uk
If you see the newsletter signup form midway down the page, in Chrome etc it has a nice blue background coupled with the border. However in IE its just showing as a white background and ignoring most of the styling.
If you then view: http://mesirow.btg340.co.uk/industries/airlines/
The newsletter signup is on the right hand sidebar. In IE8 the background only stretches half way?
This is no doubt css related. Ive tried various changes such as using fixed height etc but so far no luck :(
Any help is appreciated.
You have used <aside> tag that's why it's an Invalid Markup for IE 8
Using html5 markup in ie8/7 is causing the problem.
If you use http://modernizr.com/ it comes with an html5 shiv and should allow for html5 tags in ie7/8..
Finally i solve this question...:)
please check your html code
<aside id="wpmlwidget-2" class="wpmlwidget">....</aside>
please replace your aside code with div this will work..aside code not supported in ie-8.
<div id="wpmlwidget-2" class="wpmlwidget">....</div>
and for border radius in ie-7 or ie-8 possible via java script check this link http://davidwalsh.name/css-rounded-corners
This div will have a computed height of 104.5px (in most recent Chrome, FF, and IE)
<div><img src="" height="100px" /></div>
This div will have a computed height of 100px
<div style="overflow:auto;"><img src="" height="100px" style="float:left;" /></div>
I used FireBug to look at the DIVs and IMGs, and both IMGs have 0 for margin, padding, and border, yet the computed height somehow is 4.5px bigger in the first instance.
Why is this? It impacts me when I try to layout a page with a consistent vertical grid. Ideally, I'd like to not have to float the imgs.
I tried to look here ==> http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.7.2 and I even tried vspace=0, but that didn't change anything.
Thanks for your help!
clients include their own stylesheets that should be overidden before you try to do any pixel-perfect layouts or cross-browser debugging. Even if you remove all your stylesheets there are still styles on the page.
Try it again with a css reset at the top of your stylesheet. Also, make sure that you're declaring a valid doctype. Use a strict doctype and make sure your code validates if that still doesn't help.
I usually use the meyer web reset with a few minor modifications that suit my workflow.
If other people are seeing 100px then it's likely a client side problem, so hopefully this troubleshoots it for you.
I use Yahoo! CSS Reset to get my browsers all starting from scratch, usually helps.
Look out for a line-height definition at a high level when applied to a div that only contains an image. (for example html {line-height:1.5em;})
You probably still want this line height setting in general for resetting text throughout the site, but try applying line-height:0 just to the div with nothing but an img inside it.
http://jsfiddle.net/kq3Yy/
Setting <div style="display:inline" /> should fix your problem.
There must be more going on here than what you show. How are you measuring these half pixels? What tool are you using? I can see line-height coming into play but you don't show that in your sample.
I am trying to build a page in .NET MVC (not that this matters) where a div is divided into left and right containers using a float. When I try to clear the float using anything other than a <b> tag (such as <div> or <br>), IE8 will not render the page correctly (it's as if it ignores the style in the tag). If I use the <b> tag, Chrome and Firefox do not render the page correctly. I have been over my HTML to make sure that I dont have any stray tags and have run it through W3C markup validator and it passes XHTML 1.0 strict. I am at a loss for what could be going on here. I realize that there are better ways to clear floats (such as using the :after pseudo element) but i need something simple and clean. I was wondering if anyone had an idea as to what might cause this to happen, maybe something in the stylesheet? Thanks in advance for any help.
I found it. Stupid IE. I had to set the height of my div that housed the two floated containers to 100%. I guess that Mozilla and Chrome assume a height of 100% where IE does not. I should have been more explicit. The problem was that when i used a DIV tag to clear the floats, nothing was showing up in my container or the background color would not fill. I had to install IE developer toolbar to figure out what was going on.
<div id="floatcontainer" style="width:100; height:100%;">
<div id="floatleft" style="float:left; width:50%; background-color:#454545;"></div>
<div id="floatright" style="float:right; width:50%;"></div>
<div id="clear" style="clear:both;"></div>
</div>
Try the clearfix method: http://www.positioniseverything.net/easyclearing.html
jimbo, I recommend using classes instead ids, and having all styles in your stylesheet. Also this should illustrate well what float and clear do http://goo.gl/uxu8G