I'm experimenting Foundation and I wanted to build a template with full width rows. Everything is working fine on Firefox and Chrome but full width is not working on IE (I'm using IE 11 so I guess previous versions are also impacted).
My html:
<div class="row fullWidth-3">
<div class="small-12 columns navigation-3">Navigation</div>
<div class="small-12 columns advertising-3">
Advertising
<div class="contentWidth-3">
<div class="small-12 columns">TEST</div>
<div class="medium-4 columns">TEST</div>
<div class="medium-8" columns">TEST</div>
</div>
</div>
</div>
and now the CSS part:
.fullWidth-3
{
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
.contentWidth-3
{
width: 85%;
margin:0 auto;
color:#000;
background-color:#FFF;
-webkit-box-shadow: 0px 0px 8px -3px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 8px -3px rgba(0,0,0,0.75);
box-shadow: 0px 0px 8px -3px rgba(0,0,0,0.75);
}
.navigation-3
{
background-color:#000;
color:#FFF;
margin:0px;
padding:5px;
box-sizing:border-box;
font-size:19px;
}
.advertising-3
{
background-color:#999;
color:#FFF;
margin:0px;
padding:5px;
box-sizing:border-box;
font-size:19px;
}
IE seems to be limited around 1000 pixels width while Firefox and Chrome displaying a full width div as expected.
I'd like to keep the foundation CSS clean. Do you have any idea of how I could solve this?
additional note:
- with this alone, it doesn't work either
.fullWidth-3
{
width: 100%;
}
Thanks
Laurent
As mentioned in the comments by #GL.awog
Class "row" has a general max-width limit of 62.5rem for all browsers, remove max-width:initial from .fullWidth-3 and you'll see the same behaviour as in IE.
Rather set max-width:100% than leave initial thing, that is not consistent across browser
Related
I'm working on a input text with image and I'm trying to position the image on the right side corner of the input text and it seems that my top positioning has different output in different browsers. So I have this HTML structure like so:
<div class="bcb-box-left-content">
<input type="text" name="skills" id="skills"/>
<img src="assets/images/plus-in-box.png" alt=""/>
<p>Maxiumum 3 skills for a guest account.</p>
</div>
And here is the style for that:
/*----the parent container-----------*/
.bcb-box-left-content
{
max-width:444px;
margin-left:17px;
position:relative;
margin-right:20px;}
/**********the anchor *********/
.bcb-box-left-content a
{
position: absolute;
bottom: 0;
right: 4px;
top:5px;
}
/**********the input text *********/
#skills {
width:100%; padding: 10px 20px 10px 10px;
}
So now is there any approach like this (but not literally the code itself):
/*in this case TOP for chrome*/
-webkit-box-shadow: 0px 3px 3px 0px rgba(57,72,83,1);
/*in this case TOP for mozilla*/
-moz-box-shadow: 0px 3px 3px 0px rgba(57,72,83,1);
/*in this case TOP for normal*/
box-shadow: 0px 3px 3px 0px rgba(57,72,83,1);
DEMO:
http://jsfiddle.net/leonardeveloper/Wm4ML/
Apply margin and default border property to your #skills class. It will give the same result on all the browsers as you mentioned. Update your CSS like below.
#skills
{
width:100%;
padding: 10px 0px 10px 10px;
margin:0;
border:1px solid #ccc;
}
DEMO
This is what I want the chicklet box to look like:![]1
For some reason I can not use negative margins to get the twitter image to go to the center of the box. Is there something wrong with my parent-child relationship?
My css is in an external sheet, but here it is:
<style type="text/css">
#chicklet_container {
margin:20px auto 0px auto;
width:540px;
height:215px;
}
#chicklet_box {
margin:0px 0px 10px 0px;
width:190px;
height:160px;
border-style:solid;
border-width:33px 5px 5px 5px;
border-color:#45BA88;
position:relative;
}
#chicklet_box2 {
margin:-30px 0px 10px 0px;
width:190px;
height:160px;
border-style:solid;
border-width:0px 0px 30px 0px;
border-color:#3f4040;
}
#chicklet_text {
text-align:center;
margin:-196px 0px 0px 0px;
color:#FFF;
width:190px;
font-family:"Verdana, Geneva, sans-serif";
font-size:27px;
line-height:20px;
}
#chicklet_text2 {
text-align:center;
margin:139px 0px 0px 0px;
color:#FFF;
width:190px;
font-family:"Proxima, Nova, Ultralight";
font-size:26px;
line-height:20px;
}
#chicklet_box img {
margin:-250px 0px auto 5px;
}
</style>
Here is the html:
<div id="chicklet_container">
<div id="chicklet_box">
<div id="chicklet_box2">
</div>
<div id="chicklet_text">Follow Me</div>
<div id="chicklet_text2">#soandsoandso</div>
<img src="images/twitter.jpg" alt="">
</div>
</div>
Why are you using so much margin to align the twitter bird image or text. Use as low margins as possible. Instead this, try using that image position:absolute; and top ,left properties. It'll be more clean. But one thing to remember if you are using absolute position for an element ,check if its outer or parent element is positioned or not, if it is not then things may go worse and that child element might go somewhere else.
Negative margins are not a hack - W3C even says: "Negative values for margin properties are allowed..."
Read More: http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
I do agree in this case though they may be over-emphasized.
Why do you have Chicklet Box 2 inside of Chicklet Box 1? I'm assuming each box represents an icon... am I wrong?
I have written a css for div positioning.
here is the css
background-color: white;
border-style: outset;
margin: 115px 0px 0px -40px;
When I see the output in firefox then div position is ok but when I see this in chrome then output gets distorted due to margin: 145px 0px 0px -40px;
for chrome margin should be margin: 115px 0px 0px -40px;
So I search google and found a snippet and I applied but did not work. which was
style="width:310;height:402;background-color:white;border-style:outset; if webkit (margin:115px 0 0 -40px) else (margin:146px 0 0 -40px);"
So guide me how could I write conditional inline css for chrome...any idea. Thanks
I wrote a test page, did not find what you said this situation.
maybe you write a test page.
Strictly speaking, firefox chrome is the standard of modern browers, should not have this kind of situation has.
*{ margin:0; padding:0;}
body{font:12px/1.5 arial;background:#fff;}
.test{background-color: white; border-style: outset; margin: 115px 0px 0px -40px;}
<div class="test"></div>
demo here
It is my understanding that a display:block will automatically start in a new line. Why do the boxes collapse when a float:left is introduced inside a div with display:block? Here is a fiddle and below the code
#wrapper {
width:300px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px solid #a39b8b;
background-color:#fff;
-moz-box-shadow: 0px 0px 10px #888;
-webkit-box-shadow: 0px 0px 10px #888;
box-shadow: 0px 0px 10px #888;}
#header { width: 100%; display: block; }
#logo { width: 100px; height: 145px; background: #fde; }
#slogan {
display: block; background: #f9ebcd; height: 35px; -moz-box-shadow: 0px 3px 10px #888;
-webkit-box-shadow: 0px 3px 10px #888; box-shadow: 0px 3px 10px #888; border: 1px solid red;
}
.left { float:left;}
<div id="wrapper">
<div id="header">
<div id="logo"class="left">left</div>
</div>
<div id="slogan">slogan</div>
Floats move an element out of the normal flow of the page. If there's nothing left in the flow inside a containing element, it will 'collapse'.
Check the specs for more info.
I recommend you familiarize yourself with clearfix. It makes life easier.
Your example (revised): http://jsfiddle.net/HkHTk/4/
That's just what happens with float.
A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
The fix:
#wrapper {
overflow: auto;
}
Demo: http://jsfiddle.net/mattball/CjXNW/
You need to clear your float using the CSS clear property.
What are you trying to do? If you want the slogan box to appear beneath the logo box, you need to add clear:both; to the #slogan code.
Im Using
.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
To add a shadow to my #Wrapper. For some reason it only travels to the end of my menu. Can anyone see why in this example http://www.kerrydean.ca/MATHESON/home5.html
Thanks!!
The issue is that you've got floated content inside of non-floated content. You need a clearfix.
Alternatively, you could float your #Wrapper element, but you can't center a floated element with margins. Here's an example:
<style type='text/css'>
#Wrapper {
margin: 0 auto;
width: 799px;
}
#Page {
float: left
}
</style>
[ snip... ]
<div id='Wrapper'>
<div id='Page' class='shadow'>
[ The rest of your content goes here. ]
Your footer is also going to cause problems because you moved it via relative positioning. Get rid of that and give it a 10px top margin, and you should be all set.
based on the way you have arranged the layout, you'll need to adjust the way you style #Wrapper.
this aught to do it:
#Wrapper {
background-color: #FFFFFF;
float: left;
left: 50%;
margin: 0 -400px;
padding-bottom: 13px;
position: relative;
width: 799px;
}