I just encountered a IE6 bug that I don't seem to identify over the net.
Basically this is when the behavior is triggered: a block element has border, on all sides except bottom, and top/bottom padding. and inside it there's another block element.
My entire code is to big to fit in here, but I narrowed it down to this simple example:
<div style="border: 5px solid red; border-bottom: 0; padding: 5px;">
<p>adasasasdas</p>
</div>
Following stuff
Now the thing that goes wrong is that the "Following stuff"'s position (whatever that is), will be altered weirdly. In this case a few pixels to the left.
To disable that weird behavior I can either keep the bottom border, get rid of the padding or make the contained element inline. But I kinda want them both. Before I have to give them up, I wanted to see if there is knowledge about this bug and if there is an alternative fix.
Thanks!
This is a pretty good fix to the bug:
<div style="border: 5px solid red; border-bottom: 0; padding: 5px; font-size:0">
<p style="font-size:16">adasasasdas</p> 
</div>
Following stuff
Basically, there has to be some inline text at the end of the div for IE6 to render it correctly. Since the   added an extra line to the bottom, I changed the font size to 0 in the div, then back to 16 (or whatever you'd normally use) inside the <p>. This has a very minimal effect on the height of the div (about 2 pixels in all major browsers) but it shouldn't be at all noticeable to users. Alternatively, you can try altering the line-height variable to 0% in the div, then back to 100% in the p, but that seemed to change the div's height by a few more pixels than the font-size method when I tried it.
My fix would be
<div style="border: 5px solid red; padding: 5px; padding-bottom:4px; border-bottom: 1px solid white;">
<p>adasasasdas</p>
</div>
Following stuff
but that may not be applicable for you depending on the context
This may help you
<div style="border-left: 5px solid red; border-top: 5px solid red; padding: 0px;">
<p style="margin:0px; padding:10px;">adasasasdas</p>
</div>
Following stuff
If you want padding adjust padding in <p> tag
Hey, I know this is old, but I also just spent several hours fighting with this bug (and in fact it took me this long to figure out that it was because of border-bottom + padding-bottom...which is a shame because if I knew what to search for I would've found this much sooner).
Anyway it suddenly occurred to me that this is yet another manifestation of the hasLayout issue in ie6. For my purposes, adding "zoom:1" to the offending divs suddenly and magically fixed it, which has the benefit of not fussing with font sizes and line heights and such.
Related
I have unwanted padding on the left of images (see code below). I have tried changing, deleting or substituting every line of code in the CSS .wrapper-shadow -- no luck. This error appears in Firefox, Chrome and Explorer. Interestingly, I have very similar code for tablet and mobile pages for the same site which do not have the error. I tried substituting the tablet CSS and HTML for the desktop code and the error showed up anyway. See attached image of the problem.
Also interesting: The tablet and mobile sites (which display correctly) have narrower left margins than the desktop site. See attached image of margin difference. I searched through every line of my custom bootstrap CSS to see if I could find a difference between the desktop and tablet style sheets -- again, no luck. Any help will be greatly appreciated. Thanks.
Zaffer
.wrapper_shadow{
max-width: 765px;
background-color: #9ebade;
border: thin solid #758fa9;
-webkit-box-shadow: 2px 2px 5px 2px #758fa9;
box-shadow: 2px 2px 5px 2px #758fa9;
margin-bottom: 15px;
padding-left: 0px;
}
<div class="container-fluid">
<div class="pageHeaderText">Virtual performance art made with Unity3D game creation software</div>
<div class="row">
<div class="col-sm-6">
<div class="wrapper_shadow center-block">
<img src="images/ColorCubed_765.jpg" class="img-responsive center-block" alt="ColorCubed"/>
</div>
I just found the answer myself. It's wonderful how thinking about a question enough to post it sometimes makes the answer pop up in your brain a few minutes later.
I had the line: "padding-left: 5px;" in the *{} style of my parent bootstrap.css which was cascading down and causing the error in my styles.css. (See code below). The fact that the error was appearing only in the desktop version of my site and not in the tablet or mobile, which have their own stylesheets was the clue. I guess the moral of the story is always to check your cascades. Thanks.
Zaffer
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-left: 5px;
}
I have a div for gallery that contains other divs(each on has an image).In the outer div i set backgournd and border but nothing happens... I know the problem is that inner divs cointains only tags and nothing else. How can i work this arround without setting fixed width??
*All tags where closed even before.I copied part of my code, sorry for the misunderstanding!
*Someone said to set overflow and it worked! Thank You!(post was deleted and didnt saw who was!
Thanks all for the answers!
<div class="gallerybox">
<div class="img">
<img src="#" width="140" class="border1" alt="Click..."/>
</div>
</div>
And the CSS.
.gallerybox {
background:#CCC;
border:#000;
-moz-border-radius: 15px;
border-radius: 15px;
}
Thanks :D
The background is working correctly. Your border issue can be fixed by assigning it a specific width and style.
For example:
border: 1px solid #000;
JS Fiddle: http://jsfiddle.net/mQQ2A/2/
Hi you should be using background-color and border-color attributes when specifying only the color of those.
.gallerybox {
background-color:#CCC;
border-color:#000;
-moz-border-radius: 15px;
border-radius: 15px;
}
It may be that you didnt set anything for the border but its color and radius:
border:#ccc;
Should be:
border:solid 1px #ccc;
Make sure you close div.gallarybox. Right now it's open. When I tried it and closed it, I found it functioning like one would expect.
http://jsfiddle.net/6rGxw/
I've always wondered what the 'best' way to position text inside a div is
1) Put padding on the element surrounding the text and minus the padding from the height/width of the element.
<div class="button">
Activate
</div><!-- button -->
.button
{
height: 20px; /* -10px from padding for text */
width: 90px; /* -10px from padding for text */
padding-left:10px;
padding-right:10px;
}
2) Put a span around the text, and position it as its own element.
<div class="button2">
<span class="button2-text">
Activate
</span>
</div><!-- button2 -->
.button2
{
height: 30px
width: 100px
}
.button2-text
{
padding-left:10px;
padding-top:10px;
}
I always go with 1) because its less code, but I feel 2) is more proper or something Wondering if I'm in the wrong for using method 1) in any way.
Your second option doesn't mix the height / width with the padding.
Nowadays browsers all follow the same box model (which is how you position in option 1). This is equivalent to having box-sizing: content-box.
Internet Explorer versions up to 6 and Quirks mode didn't and used the alternative one which included padding as part of the width, equivalent to box-sizing: border-box.
In order to correctly position for both models, using option 2 is the safest.
If you check http://jsfiddle.net/stb5a/ , box-sizing is set to content-box. Changing it to border-box doesn't change the positioning of the text;
So basically, option 2 would be used for compatibility with older versions of Internet Explorer (now pretty much gone) and by developers who use to code for these versions, using the same pattern as they've always done.
The best way would be to use the <button>
jsBin demo
<button class="button">Activate</button>
CSS:
.button{
border: 1px solid #888;
background:#eee;
padding:5px 30px;
border-radius:4px;
}
And you'll have free time to play with colors :)
I'd go with 1) . In 2) the <span> tag is semantically useless. Unless you have no other content inside the <div> dont compliate your markup.
KISS - Keep It Simple Stupid
I have a some images that I need to line up without any gaps. I can get them fine in jsFiddle, see http://jsfiddle.net/QZLSf/2/
But on the actual SharePoint site the images have a gap between them, kind of like http://jsfiddle.net/QZLSf/1/
I have checked with FireBug and the images, and links, have all the properties they should have, but I can't get rid of that gap.
What could I be missing?
EDIT: I know that the second link has footerlinks defined as a class, but I was just using that to illustrate the problem I'm having. That's not what my actual code is.
EDIT: EDIT: Ok guys there seems to be a misunderstanding as to what I am asking here. I know HOW to get the required result, just that it isn't working on the SharePoint site. I just need advice on what might be wrong as everything that should work isn't working.
Remove the whitespace/line breaks between images.
Demo: http://jsfiddle.net/QZLSf/12/
Just posted this solution elsewhere and think it's the same thing.. is your Sharepoint implementation putting the <img> elements on separate lines in the HTML?
In your fiddle you have them all on one line.. if that's the difference then I'm afraid it's natural behaviour for inline elements (space between words).. there are hacks out there that involve HTML comments or removing the spacing or splitting the img tags, but if you can't have (or don't want) an HTML workaround - then something like this should work
CSS:
div {word-spacing: -4px; background: #eee; border: 1px solid #000; width: 600px;}
div p {word-spacing: 0;}
HTML
<div>
<img src="http://dummyimage.com/150x50/dad/fff" alt="my mini thing" />
<img src="http://dummyimage.com/150x50/000/fff" alt="my mini thing" />
<img src="http://dummyimage.com/150x50/dad/fff" alt="my mini thing" />
<img src="http://dummyimage.com/150x50/000/fff" alt="my mini thing" />
<p>the div containing these images and text has it's word-spacing set to -4px which removes the default whitespace</p>
<p>but then you want some text with normal spacing reset the word-spacing to 0 on the <p> elements, which is the default</p>
</div>
this is your code:
#footerlinks a, #footerlinks img{
but footerlinks is class not an id, so use this:
.footerlinks a, .footerlinks img{
ways to skin cats...
http://jsfiddle.net/eCSYt/45/
Update for bazmegakapa:
Sorry assumed the code was pretty easy to follow and I just presented it as an alternative way to approach it..
The gaps were caused by the white space in the HTML formatting - which is significant. By setting the font-size to 1px (actually 0 would be better if it is supported xbrowser) the white space is too small to render. In a real page you may also need to zero the line-height as well.
I used text-align to centre the text just to show an alternative method... and it has the advantage that you don't need to know the total width of the images
That's just the way it is. You have to set the margin-left to -4px
.footerlinks img {
margin-left: -4px;
}
.footerlinks img:first-child {
margin-left: 0px;
}
Demo: http://jsfiddle.net/QZLSf/11/
EDIT: This solution is more correct. I fixed the margin on the first child.
So, here's my question, I'm doing a newsletter for a customer, which will look like a postalcard.
I want my layout to look like writing on lines
Can anyone help me achieve what I'm trying to do?
Putting my text in TD tags doesn't work since I don't know the length of each sentences.
Let me know if you need more info!
Thanks :)
I just ran into this issue where a client "needed" to have a notes section on a print-out with user-entered note text underlined as if on spiral-bound paper. (I've learned to stop asking why.) Why didn't I use a background image? It won't print out, so not an option.
Here's the structure (IDs for clarity):
<p id = "p">
<span id = "span1">
<span id = "span2">
sadfa sdfhkas dfjkahsd fhjklasdg f askjldfh jklas djklfh aljks hfjkl hasjdklfg hjlashdjlfgh jlkashdjkl gfhloashdfgh jkladshjkgl haskl dhfiu hajkl fghuasbhfljbahuk bfkljabwehrf bajkls bflaskdjf ljakdfk
</span>
</span>
</p>
The following styles are applied:
#p {
border-bottom: 1px solid black;
text-align: justify;
}
#span1 {
display: block;
margin-bottom: -1px;
}
#span2 {
border-bottom: 1px solid black;
}
Let's start from the inside here...
#span2 is given a bottom border in order to create the bulk of the lined-paper look. If we stop here, however, we have a problem: The lines don't extend all the way to the right margin, as has been mentioned previously. This issue we'll get to in a moment.
#span1, wrapping #span2, is 50% of the solution to this too-short line problem. I've given it a display property of block, which will allow me to apply a -1px bottom margin, effectively "covering up" the last overhanging line of #span2 with the bottom edge of #span1. The effect of this isn't worth much until we get to...
#p Here the styles we've applied to #span1 pay off. First, we have text-align: justify which takes care of most of the bottom-border lines reaching the right margin, save of course for the last line, which now looks really out of place. To take care of this, we apply border-bottom: 1px solid black to #p which -- because of the -1px bottom margin on our block-styled #span1 -- overlaps the last, short bottom border and completes the illusion.
Yes, it's sort of kludgy, but when it comes down to the wire and the client's demands can't be adjusted, sometimes a kludge is what you need.
(Note: I wouldn't expect this to work for email formatting... Like I said before, it's something I needed for mimicking that lined-paper look on a printed page.)
Unless I am mistaken, you want something like this:
http://jsfiddle.net/eB6tY/
CSS:
#postcard .line
{
width: 100%;
border-bottom: 1px solid #000;
}
HTML:
<div id="postcard">
<div class="line">Line 1</div>
<div class="line">Line 2</div>
<div class="line">Line 3</div>
</div>
in your lines that you need to underline add a style="border-bottom: 1px solid #000"(probably on your containing td)
Maybe Im missing the point but could you not do
<u> my text here </u>
assuming DIV as your relevant selector
div{text-decoration:underline}
or inline if you are emailing this...
<div style='text-decoration:underline'>
You could use a background image with the height of one line of text (plus margin-bottom) and width 1 pixel. The content will be "transparent plus a dot for the place where the line should go"...
This came up in my search so I will post my solution to my problem. I needed to underline an a tag that had padding to the end of line that; problem was the underline would start at begining of the element and not the text.
Problem:
Solution:
menu .heading a {
color: #414142 ;
}
.menu .heading a:after {
/* to get a nice underline that starts at padding-left offset */
border-bottom: 2px solid #414142;
content: '';
display: block;
position: relative;
bottom: -0.5em;
}