If I add a margin-bottom to the last element on a page (a div in my case), it's ignored in IE 9. In other words, the last element is flush with the bottom of the window.
Is this a known issue? It works as expected in Chrome/Firefox.
This is true if the divs are floated but the containing div is not.
<div class='outer'>
<div class='inner'>dfsdfs</div>
<div class='inner'>sdfsdf</div>
<div class='inner'>vxcvxv</div>
<div class='inner'>cvxcv</div>
</div>
div.outer {
background: green;
}
div.inner {
height: 50px;
background: red;
margin-bottom: 50px;
display:block;
float:left;
clear:left;
}
I have setup a simple test to see whether or not I could reproduce your issue. First, following your lead, I provided some HTML - being sure to make the last element a div:
<div></div><div></div>
<div></div><div></div>
Then some styles:
div {
height: 50px;
background: red;
margin-bottom: 50px;
}
I then proceeded to test IE9 on Windows 7 using browserstack - I was unable to reproduce your issue. In my case, the browser properly rendered the appropriate spacing around the last element.
Fiddle: http://jsfiddle.net/jonathansampson/EgjVn/
Related
I am trying to create paragraphs of text where each word is actually a div containing text and a canvas above it (long story!). This means I end up with a series of divs in each paragraph, which I style as inline blocks. These divs look too close together, so I use the CSS word-spacing property to increase the spacing between them.
This works fine on every browser except Safari. On Safari (OS X and iOS), the words spill over the edge of the containing div, even when I fix the width of the container. I suspect that this is a bug in Safari, since all other browsers seem to render my HTML the same way, but does anyone have a way around it?
I have distilled the problem down to this example HTML:
<html>
<head>
<style>
#box1 {
width: 300px;
background: Red;
word-spacing: 50px;
}
#box1>div {
display: inline-block;
}
#box2 {
width: 300px;
background: Green;
word-spacing: 50px;
}
</style>
</head>
<body>
<div id="box1">
<div>This</div> <div>text</div> <div>should</div> <div>look</div <div>the</div> <div>same</div> <div>in</div> <div>both</div> <div>boxes</div> <div>but</div> <div>it</div> <div>doesn't</div> <div>in</div> <div>Safari</div>
</div>
<div id="box2">
This text should look the same in both boxes but it doesn't in Safari
</div>
</body>
</html>
This can also be viewed as a JS Fiddle here: http://jsfiddle.net/4eh6G/
P.S. On older versions of Safari, there seems to be a different problem, where word-spacing appears to have no effect at all in this example. Any fix for this would obviously be great, too!
I have bunch of inline div's, followed by a block div. Inside block div, there should be table, something like that:
<div class="myInlineDiv"></div>
<div class="myInlineDiv"></div>
<div class="myBlockDiv">
<table>
...
</table>
</div>
Problem is: table is misaligned in FireFox. It works well in Chrome and IE.
Here is fiddle: http://jsfiddle.net/zk9eD/2/ Red block should be in yellow area.
(I can fix position problem with position: inline; but it causes another problem with table width).
Add float:left; in table class
.table1 {
background-color: red;
width: 100%;
border: 0px;
float:left;
}
Check working demo - http://jsfiddle.net/zk9eD/5/
I'm writing a page that looks code wise like
<div class="green">
<span class="orange">s1</span>
<span class="orange">s2</span>
</div>
but that should be formated via CSS like:
The surrounding black frame shows the full page in the browser. (Think of <body></body>)
The red frame is a fixed width and fixed hight basically empty space that should be added by the CSS .green:before (I'm using it's ability to format it's borders for a visual effect)
The green frame shows the real content that should be as wide as necessary to contain both <span> in one line
The blue frame should be created by the CSS .green:after, has a fixed height and should take up all the space till the right border of the page - i.e. it must have a variable width.
Required browsers are the modern ones (Firefox, Chrome, Safari, Opera) in recent versions. No need to take care of IE. Mobile browsers would be great, though.
How can I achieve that? (All my attempts failed sooner or later...)
A jsFiddle with this example code is at http://jsfiddle.net/X2MDG/
I'm afraid that there is no way to satisfy all your constraints. The main things that don't seem to have a CSS solution are:
Controlling the width of just the green bit can't be done without affecting the width of the red :before and blue :after content. As you mention in the comments to the question, using a different DOM structure is not an option.
The blue (:after) content should take up all space not needed by the green (main) content.
The fixed height of red/blue may require some clearing on the elements below the entire div.
So, as far as I could tell, the question as you asked it doesn't have a 100% satisfying answer. Either way, here's the code I came up with researching this problem, perhaps it can help you or others stumbling on this question. See either this jsfiddle or the code below:
<div id="page">
<div class="green">
<span>Orange 1.</span>
<span>Orange 2. Which can be really wide.</span>
</div>
<p style="clear: both;">Black is the page. Clearing is
needed because the red and blue boxes are not in the
flow but do have quite some height.</p>
</div>
CSS:
div#page {
border: 2px solid black;
width: 80%;
padding: 2px;
}
div.green:before {
content: 'red / before';
border: 2px solid red;
float: left;
display: inline-block;
width: 140px;
height: 200px;
}
div.green {
border: 2px solid green;
}
div.green:after {
content: 'blue / after';
border: 2px solid blue;
display: inline-block;
float: right;
height: 60px;
}
div.green span {
border: 2px solid orange;
}
I'm going to die. This is happening to me the second time this week, however I have not idea how i fixed it the first time.
I'm completely helpless and angry. First off, w3c validator says no errors. My SASS Framework for CSS says no errors and I just don't have errors.
this is all I have, the entire page is styled successfully...
<body>
<div id="doc">
<header>
<div class="inner">
<div id="branding">
<a class="logo" href="#">Jihaa</a>
</div>
...and suddenly... i can't select the .logo inside of #branding ARRRRGGGG.
#branding .logo {
width: 200px;
height: 70px;
background: red;
}
this should do the job right, but no.
Neither does this header #branding .inner .logo {or any other possible combination.
Why? I'm completely helpless. No inspecting tool in all my browsers selects the appropriate css. It just doesn't relate to it!
.logo is an a which is an inline element and won't accept width and height.
Add display:inline-block; to the style and it should work.
#branding .logo {
width: 200px;
height: 70px;
background: red;
display:inline-block;
}
EDIT
To address #jackJoe's comment below.
In case you need to support IE6 or 7, you can add the following at the bottom of the rule:
zoom:1;
*display: inline;
_height: 12px; //or whatever you need
I don't think you can set a width or height for an anchor because it is an inline element.
Use the {display:inline-block;} that Jason Gennaro mentioned above.
in this case, if you would like to style the a with those properties, you need to specify its display to block
#branding .logo {
width: 200px;
height: 70px;
background: red;
display: block;
}
Make sure you don't use the same ids anywhere else in the page.
Also try taking the logo class out of a tag and put it in a div.
What makes you think you cannot select it? If its because your height and width are being ignored in your .logo class, that would be because you need to display:block .logo in order for your to respect them.
I'd like to have a line that starts right after my text on the same line, I've tried with the following simple code
<html><body>My Text<hr/></body></html>
It seems that <hr> is not an option because it is always on a new line and I'd like the line to start at the right of my text.
Any help ?
The <hr> has default styling that puts it on a new line. However that default styling can be over-ridden, in the same way as it can for any other element. <hr> is in essence nothing more than an empty <div> with a default border setting.
To demonstrate this, try the following:
<div>Blah blah<hr style='display:inline-block; width:100px;' />dfgdfg</div>
There are a number of ways to override the styling of <hr> to acheive your aim.
You could try using display:inline-block; along with a width setting, as I have above. The down-side of this approach is that it requires you to know the width you want, though there are ways around this - width:100%;, and the whole line in a container <div> that has overflow:hidden; might do the trick, for example:
<div style='overflow:hidden; white-space:nowrap;'>Blah blah<hr style='display:inline-block; width:100%;' /></div>
Another option would be to use float:left;. You'd need to apply this to all the elements in the line, and I dislike this option as I find that float tends to cause more problems than it solves. But try it and see if it works for you.
There are various other combinations of styles you can try - give it a go and see what works.
Using FlexBox Property this can be achieved easily.
.mytextdiv{
display:flex;
flex-direction:row;
align-items: center;
}
.mytexttitle{
flex-grow:0;
}
.divider{
flex-grow:1;
height: 1px;
background-color: #9f9f9f;
}
<div class="mytextdiv">
<div class="mytexttitle">
My Text
</div>
<div class="divider"></div>
</div>
Try this:
<html><body>My Text<hr style="float: right; width: 80%"/></body></html>
The inline CSS float: right will keep it on the same line as the text.
You'll need to adjust the width if you want it to fill the rest of the line.
Using inline or float, as far as I tested it doesn't work properly even if this was my first thought. Looking further I used the following css
hr {
bottom: 17px;
position: relative;
z-index: 1;
}
div {
background:white;
position: relative;
width: 100px;
z-index: 10;
}
html
<div>My Text</div><hr/>
Demo http://jsfiddle.net/mFEWk/
What I did, is to add position relative in both elements (to give me the advantage of z-index use). Also from the moment I had position:relative for hr I moved it from the bottom:17px. This move it above the div that contains the text. Applying z-index values and adding background:white for the div puts the text above the the line. Of course don't forget to use a width for the text, otherwise will take the whole width of the parent element.
<div style="float: left">Some text</div>
<hr style="clear: none; position: relative; top: 0.5em;">
Exactly what you want.
Try this. It works
<p style="float:left;">
Hello Text
<hr style="float:left; width: 80%"/>
</p>
You can also use this to draw a line between texts like
Hello -------------------------- Hello
The OP never specified the purpose of the line, but I wanted to share what I ended up doing when I was making an html template where the user needed a line to write on after the document was printed.
Because the hr tag defaults to its own line and defaults to being centered in the line, I decided to use a div and style it instead.
HTML
This is my text.<div class='fillLine'></div>
CSS
.fillLine {
display:inline-block;
width: 200px;
border-bottom: 1px solid black;
}
JSFiddle Demo
Style Div for Line After Text
Hope that helps anyone who had the same goal as me.
hr {
width: {so it fits on the same line as the p tag};
}
p {
float: left;
width: {enough to accomodate the hr};
}
That sort of make sense?
<p>My text</p>
<hr />
Here's one potential approach, but it has some assumptions/requirements. Your question should be edited to give more specific information about what you're building.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Blah</title>
<style type="text/css">
body {
background-color : white;
font-family : Arial;
font-size : 16px;
}
.wrap {
background: transparent url(px.png) repeat-x 0px 85%;
/* Different fonts or text sizes may require tweaking of that offset.
px.png is a one-pixel(though can be thicker if needed) image in whatever color you want the line */
}
.inner {
background-color : white;
/* Should match the background of whatever it's sitting over.
Obviously this requires a solid background. */
}
</style>
</head>
<body>
<div class="wrap"><span class="inner">Here is some text</span></div>
</body>
</html>
I used the following technique:
Give the container div a background-image with a horizontal line.
Put an element (like <h3>) in the container div (I have it on the right so float: right; )
Use the following css:
.line-container {
width: 550px;
height: 40px;
margin-top: 10px;
background-image: url("/images/horizontal_line.png");
}
.line-container h3 {
padding-left: 10px;
float: right;
background-color: white;
}
Below code did the job for me
HTML File:
----------
<p class="section-header">Details</p><hr>
CSS File:
----------
.section-header{
float: left;
font-weight: bold
}
hr{
float: left;
width: 80%;
}
INLINE:
-------
<p style="float: left;font-weight: bold">Details</p><hr style="float: left;width: 80%;">