The styling I wanted to be is in Chrome but it looks different in Firefox and IE. All my fields are float to the right except the field "name". Is it about the floating?
My Chrome:
My Firefox and IE:
There is a huge spaces besides "Status" and the header looks bigger in height too.
===CSS====
.column-name { margin: 2px; width: 40%; }
.column-priority { float: right; margin: 2px 12px; text-align: center; width: 100px;}
.column-severity { float: right; margin: 2px 12px; text-align: center; width: 100px;}
.column-status { float: right; margin: 2px; width: 100px;}
===HTML====
<div class="results-header ">
<div class="column-status" value="status">Status<span class="sort jive-icon-sml"></span></div>
<div class="column-severity" value="severity">Severity<span class="sort jive-icon-sml"></span></div>
<div class="column-priority" value="priority">Priority<span class="sort jive-icon-sml jive-icon-arrow-generic-down"></span></div>
<div class="column-name" value="name" >Name</div>
</div>
I'm 99% sure it's because you need to tell which padding it has because that has higher priority in those browsers.
You might make a star rule
*{margin:0; padding:0;}
but again you need to post more code before I can tell you 100% what to do. btw if your uncertain about anything, related to browser compabtility see: http://www.quirksmode.org/css/contents.html
always use css resets {margin: 0; padding: 0; border: 0; outline: 0;}
beacuse every browser has it's own margin, padding...
Related
I've added addthis share buttons to a page here and I can't get equal margins/distribution across the div width, so there's a gap on the right hand side which takes into account the fluid width.
I've tried proportional margins/paddings at different percentages, but can't seem to make it responsive.
Here's the CSS and the rest is viewable in an inspector:
.bg.social {
border: 1px solid #FCFCFD;
padding: 15px 0;
background: #E4E4E4;
text-align: center;
width: 94%;
margin: 0 0 2em;
height: 32px;
}
.bg.social a {
margin: 0 4%;
padding: 0;
float: none;
}
.addthis_toolbox {
margin: 0 2%;
}
Update: Got it to work with the following, the same as Bartdude's answer:
.bg.social a {
padding: 0 3%;
display: inline-block;
}
.bg.social {
border: 1px solid #FCFCFD;
padding: 15px 0;
background: #E4E4E4;
text-align: center;
width: 95%;
margin: 0 0 2em;
}
Basically, what you want is to be able to use text-align:center on your button links. Problem is you can't do that, as you floated them for them to appear side-by-side.
I would then suggest to change the display of those anchors to display:inline-block (be carefull though it's not supported by older IE versions... I don't find it important myself but maybe your target audience is using it), so that you can both make use of the text-align:center of the parent and still have a margin around each anchor.
Alternatively, I would suggest only putting a right or left margin, and use CSS pseudo classes :last-child or :first-child so that the first or last element don't have that margin. This shouldn't actually make no visible difference, but your CSS would be a bit more clean and modern...
Try setting margin to
.addthis_toolbox {
margin: 0 10%; // from 2 to 10%
}
.addthis_toolbox {
margin: 0 5%;
}
I cleared all the margins and divs in parent and child divs. Then :
.bg.social a { width:20% }// divided to 5 equal part
and dicreased the margin of .addthis_toolbox.addthis_32x32_style span {
.addthis_toolbox.addthis_32x32_style span {margin-left: 20px;}
everything is ok.
Try it, add to your css:
div.foraddthis {
text-align: center;
width: 100%;
}
.addthis_toolbox {
display: -webkit-inline-box;
display: -moz-inline-box;
display: inline-flex;
}
.addthis_default_style .at300b {
float: none;
}
And HTML:
<div class="foraddthis">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style"> <a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_pinterest_share"></a>
<a class="addthis_button_tumblr"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-529d1f4f354abd32"></script>
</div>
<!-- AddThis Button END -->
Demo: http://jsfiddle.net/vPw7u/
I have an annoying problem, it works fine in chrome but in firefox there is a gap for no reason between two divs.
<div class="body-right">
<!-- VERTICAL GAP IS HERE -->
<div class="body-right-container">
<div class="body-right-pad">
</div>
</div>
Chrome: http://gyazo.com/d5464f5fe791c3958d28816dfd03803c
Firefox: http://gyazo.com/f5f25eeab19622a2696e2d2510e1ea07
Nothing in my css has any kind of margin that would be causing this gap. Any ideas?
.body-right {
float: left;
width: 767px;
background-color:#ebebeb;
border-left: #c7c7c7 1px solid;
padding-left: 1px;
min-height: inherit;
}
.body-right-container {
display:block;
background-color:#ebebeb;
position: relative;
padding: 0 0 49px 49px;
min-height: inherit;
}
.body-right-pad {
width: 300%;
background-color:#ebebeb;
position: absolute;
left: 765px;
height: 100%;
}
I see a large gray rectangle on the far right, that element could be potentially the one that's creating your "gap". I see it on the Firefox screenshot, but not in the Chrome.
You should investigate that element and see why it's appearing there in Firefox. This could possibly be due to a width:100% applied to the container holding that gray rectangle.
I have a div which contains another div with a background image:
<div class="icePnlGrp graMyTasksHomePanelDiv">
<div class="icePnlGrp graMyTasksHomePanelTitleDiv" id="j_id157:j_id165">
<label class="iceOutLbl graMyTasksHomePanelTitle" id="j_id157:j_id166">PLAN</label>
<!--rest of the code--!>
</div>
</div>
This looks fine on Chrome and Firefox:
But on IE it looks strange:
The CSS classes for those two divs:
.gramytaskshomepaneldiv {
background-color: whiteSmoke;
width: 156px;
height: 150px;
margin-right: 50px;
border-right: 3px #EEE9E9 ridge;
border-bottom: 3px #EEE9E9 ridge;
display: inline;
float: left;
margin-bottom: 15px;
}
.gramytaskshomepaneltitlediv {
background: url('/resources/images/external/navigation_arrow.png');
height: 40px;
margin-top: -30px;
width: 185px;
position: relative;
margin-left: -4px;
}
Can you please give a helping hand? Most of the IE 8 issues I had I've solved using position relative, but here this simply does not work...
Thanks...
Ps: If I do hover on a link on IE, on the same page, on that main div (because the rest of the code contains those links), the image AUTOMATICALLY RENDERS fine... Or if I disable any css property from IE developer tools the page is re-render and the image appears fine...which is really strange, ineded...
Here's the code for rounded div. Everything works fine except IE(6/7), even in IE(8/9) it's pretty good, and obviously other browsers seem nice on the rounded div. Described later after the code.
html code:
<div id="tweets">
<div id="tweets_text">
<div id="tweets_text_top">
<div id="tweets_top_left">
</div><!--#tweets_text_left-->
<div id="tweets_top_right">
</div><!--#tweets_text_right-->
</div><!--#tweets_text_top-->
<div id="tweets_text_middle">
TeXt HeRe....
</div><!--#tweets_middle-->
<div id="tweets_text_bottom">
<div id="tweets_bottom_left">
</div><!--#tweets_text_left-->
<div id="tweets_bottom_right">
</div><!--#tweets_text_right-->
</div><!--#tweets_text_bottom-->
</div><!--#tweets_text-->
</div><!--#tweets-->
css code:
#tweets{
clear: both;
margin-bottom: 10px;
padding: 0px;
border: 0px;
}
#tweets_text{
width:214px;
clear: both;
margin: 0px;
padding: 0px;
border: 0px;
background: #141414;
}
#tweets_text_top, #tweets_text_bottom{
width: 214px;
height: 10px;
background: #000000;
clear: both;
}
#tweets_top_left{
height: 10px;
width: 10px;
background: url('images/top_left.jpg') no-repeat;
float: left;
clear: left;
}
#tweets_top_right{
height: 10px;
width: 10px;
background: url('images/top_right.jpg') no-repeat;
float: right;
clear: right;
}
#tweets_bottom_left{
height: 10px;
width: 10px;
background: url('images/bottom_left.jpg') no-repeat;
float: left;
clear: left;
}
#tweets_bottom_right{
height: 10px;
width: 10px;
background: url('images/bottom_right.jpg') no-repeat;
float: right;
clear: right;
}
#tweets_text_middle{
width: 200px;
padding: 7px;
background: #000000;
color: #f4f4f4;
font-size: 12px;
}
The images are here:
rounded div's images
Now it occurs only in IE(6/7). The bottom portion isn't rounded like the top portion. If you test, hope you will find what I asked for.
If any one can find the mistake I will be grateful.
If you have any problem to understand or to get the docs, let me know.
Thanks.
Here's a very popular jQuery round corner plugin.
http://jquery.malsup.com/corner/
It's supported in all browsers including IE6. It draws corners in IE using nested divs (not images). It also has native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). So in those browsers the plugin simply sets a css property instead.
Here's How to use it
You need to include the jQuery and the Corner js script before </body>. Then write your jQuery like $('div, p').corner('10px'); and place before ''. So your html will look like the below code. Here i'm making round corners for all div and p tags. If you want to do it for specific id or class then you can do something like $('#myid').corner();
<body>
<div class="x"></div>
<p class="y"></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
<script>$('div, p').corner();</script>
</body>
Check working example at http://jsfiddle.net/VLPpk/1
This is an excellent tool for cross-browser rounding corners: http://css3pie.com/
It's specifically made to handle IE6-8 which doesn't support any css corner rounding.
Use the code in CSS to round.
border-radius:7px 7px 7px 7px;
Ok, so we know that setting padding to an object causes its width to change even if it is set explicitly. While one can argue the logic behind this, it causes some problems with some elements.
For most cases, you just add a child element and add padding to that one instead of the one set to 100%, but for form inputs, that's not a possible step.
Take a look at this:
body {
font-size: 14px;
margin: 0px;
padding: 0px;
}
DIV.formfield {
clear: both;
margin: 0px;
padding: 10px;
}
DIV.formlabel {
margin-top: 20px;
padding: 5px;
font-weight: bold;
text-align: left;
}
DIV.formvalue {
background-color: #eee;
border: 1px solid red;
padding: 10px;
margin: 0px;
}
DIV.formvalue.correct {
border: 1px solid green;
}
textarea.textarea {
width: 100%;
min-height: 80px;
}
input.input {
width: 100%;
padding: 5px;
}
input.input2 {
width: 100%;
}
input.input3 {
width: 100%;
padding: 5px;
margin: -5px;
}
input.input4 {
width: 100%;
padding: 10px;
margin: -10px;
}
input.input5 {
width: 100%;
padding: 10px;
box-sizing: border-box;
}
<div class='formfield' id='field_text'>
<div class='formlabel'>No padding</div>
<div class='formvalue'>
<textarea class='textarea' cols='80' rows='10' name='text'>No padding here</textarea>
</div>
<div class='formlabel'>Also no padding</div>
<div class='formvalue'>
<input type='text' class='input2' name='apa' value='Or here...' />
</div>
<div class='formlabel'>5px padding, which extends the parent element, d'oh!</div>
<div class='formvalue'>
<input type='text' class='input' name='apa' value='I dont want to extend outside the square!' />
</div>
<div class='formlabel'>5px padding and -5px margin, this does the trick, almost...</div>
<div class='formvalue'>
<input type='text' class='input3' name='apa' value='I dont want to extend outside the square!' />
</div>
<div class='formlabel'>10px padding and -10px margin, things are falling apart on the right side</div>
<div class='formvalue'>
<input type='text' class='input4' name='apa' value='I dont want to extend outside the square!' />
</div>
<div class='formlabel'><img src="/bilder/icons/badges/ok.png" width="16" height="16" border="0"> 10px padding and box-sizing: border-box</div>
<div class='formvalue correct'>
<input type='text' class='input5' name='apa' value='I dont want to extend outside the square!' />
</div>
</div>
The second input has its padding set to 5px which I very much prefer to the default setting. But unfortunately that makes the input grow 10px in all directions, including adding 10px to the 100% width.
Problem here is that I can't add a child element inside the input so I can't fix it. So the question is:
Is there any way to add padding inside the input while still keeping the width 100%? It need to be 100% since the forms will render in different width parents so I don't know beforehand the width of the parent.
Using CSS3 you can use the property box-sizing to alter how the browser calculate the width of the input.
input.input {
width: 100%;
box-sizing: border-box;
}
You can read more about it here: http://css-tricks.com/box-sizing/
I don't know how cross browser compatible it is (it works in firefox and safari), but you could try this solution:
DIV.formvalue {
padding: 15px;
}
input.input {
margin: -5px;
}
(Only posted the values that I changed)
One option is to wrap the INPUT in a DIV which has the padding.
CSS:
div.formvalue {
background-color: #eee;
border: 1px solid red;
padding: 10px;
margin: 0px;
}
div.paddedInput {
padding: 5px;
border: 1px solid black;
background-color: white;
}
div.paddedInput input {
border: 0px;
width: 100%;
}
HTML:
<div class="formvalue">
<div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>
The oft-forgotten calc can come to the rescue here:
input {
width: calc(100% - 1em);
padding: 0.5em;
}
Since we know the padding will add to the width of the element, we simply subtract the padding from the overall width. It's supported by all major browsers, is responsive, and doesn't require messy wrapper divs.
I've been having some issues with something similar to this. I have tds with inputs of 100% and a small padding. What I did was compensate for the padding on the td as follows:
.form td {
padding-right:8px;
}
.form input, .form textarea {
border: 1px solid black;
padding:3px;
width:100%;
}
padding of 8px to include the border and padding of the input/textarea.
Hope this helps!
Perhaps take the border+background off the input, and instead enclose it in a div with border+background and width:100%, and set a margin on the input?
One solution I have found works is to absolutely position the input with a relatively positioned parent tag.
<p class="full-width-input">
<input type="text" class="text />
</p>
The apply the style:
p.full-width-input {
position: relative;
height: 35px;
}
p.full-width-input input.text {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 5px;
}
The only thing to be aware of is that the paragraph tag needs a height setting as its absolutely positioned children will not expand its height. This avoids the need to set width: 100% by locking it to the left and right sides of the parent element.
Try using percentages for your padding:
.input {
// remove border completely
border: none;
// don't forget to use the browser prefixes
box-shadow: 0 0 0 1px silver;
// Use PERCENTAGES for at least the horizontal padding
padding: 5%;
// 100% - (2 * 5%)
width: 90%;
}
If you're worried about users on old browsers who can't see the box-shadow, just give the input a subtle background colour as backup. If you're using pixels for this sort of thing, then the chances are you're using them elsewhere, which could present a few extra-challenges, let me know if you encounter them.
Only thing I know to prevent this is assign values like that 100%-10. But it has some compatibility issues tho.