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;
}
Related
I'm iterating through the results of query and displaying select fields of each record.
I want the text centered on screen.
Using the CSS in the example looks OK on a regular computer screen but is too small on a Smart Phone.
Of course I've greatly simplified the example to keep it short.
The Question: How can I just get the text for each record to center... without only using 505 of the available screen width?
.center {
margin: auto;
width: 50%;
border: 2px solid #d3d3d3;
padding: 10px;
}
`enter code here`Query Results:<br>
<div class="center">
Online Code Test</a><br>
``Is a site for testing some code online.<br>
But not PHP.<br>
Where can you test PHP online?<br>
</div>
<div class="center">
Programmers Resource.</a><br>
The forum is very big.<br>
Members world wide.<br>
The go to place if you get stuck.<br>
</div>
The Problem
I created the keyboard with 2 kinds of keyboards (alphanumeric, numeric) but when I test my script there appears to be an inheritance bug with CSS in IE 7. I used the class .backspace to segregate the two types of keys but they still inherit the background-position from .backspace
Code
Css code
key
.keyboard-table.numeric .key-element{background-position: 5px -90px}
.keyboard-table.numeric .key-element.keypressed{background-position: 5px -210px}
.keyboard-table.numeric .backspace{ background-position: -295px -90px}
.keyboard-table.numeric .backspace.keypressed{background-position: -295px -210px;}
Html Code
<div class="keyboard-column">
<span class="key-element" ascii-code="48" style="margin: 5px 0px 0px 5px; width: 300px; height: 112.5px;">
0
</span>
</div>
<div class="keyboard-column">
<span class="key-element backspace" style="margin: 5px 0px 0px 5px; width: 640px; height: 112.5px;">
← Apagar
</span>
</div>
Please, how can i fix this bug?
I don't think IE7 supports side-by-side sibling selectors. So these won't work...
.backspace.keypressed
You may want to add .keypressed to the keyboard-column instead and then use..
.keypressed .backspace
IE7 supports the multiple class selector.
I suspect the problem is that you are not using a DOCTYPE in your HTML, so browser rendering is switched to quirks mode, which is something you would like to avoid.
You should simply add this as the first line of your HTML:
<!DOCTYPE html>
This is the DOCTYPE for HTML5, but it does not really matter, it will work fine in IE7 and trigger standards mode instead of quirks mode.
I have this as my rule for rounded:
.rounded { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
On my site I'm working on, http://urlme.cc/movies6, if you view it in Chrome, each movie div has the class "rounded", but, the div has straight edges.
In Firefox, it's rounding correctly. Please see image comparison below.
You can view source / inspect elements on the above link, but, the html looks basically like this:
<div class="movie rounded">
<img src="..." />
<div class="details">1 hr, 20 min</div>
</div>
Question: any reason why Chrome is not rounding those div.movie corners, while Firefox is? Thanks!
Taking off position:relative on .movie seemed to do it in Chrome Developer Tools.
I have some very simple HTML:
<div id="advisor">
<div id="print_this_container">
<form>
<input type="button" value=" Print this page "
onclick="window.print();return false;" />
</form>
</div>
<div id="top_section">
<div class="left_box" style="position: relative;">
<div id="avatar_container">
<img class="avatar" src="<%= #advisor.avatar_url %>" />
</div>
</div>
<div class="right_box">
<h2><strong>Council on Emerging Markets</strong></h2>
</div>
</div>
</div>
The associated CSS is:
#advisor{
width: 800px;
}
#top_section{
border-bottom: 1px solid #666 !important;
height: 200px;
}
.right_box{
float: left;
padding-left: 25px;
padding-top: 50px;
width: 550px;
}
.left_box{
background: #ccc;
width: 200px;
float: left;
text-align: center;
height: 100%;
}
img.avatar{
width: 150px;
}
And in my print.css
#advisor{
width: auto;
}
#print_this_container{
display: none;
}
It looks great in my web page. However, when I print it the following issues occur:
The top section border disappears
The image shrinks
The right box is displayed under the
left box, it does not float
The left box background color
disappears
Does anyone know how to fix these issues?
There are a number of problems with printing from within a browser. A lot of the printing-specific stuff doesn't work on most browsers and even where it's supported by multiple browsers, it is handled differently
We've jsut spent two weeks trying to print labels using a browser - in the end, we've gone for multiple solutions which fail as gracefully as possible...
Firstly, we detect silverlight and flash - if either is present, we use them to print.
Next, we have a piece of code which loads a web browser in memory on the server and takes a screenshot of the page at a specific URL - this generates an image which we then return to the client for printing. This is okay for our scenario but you might want to check mem usage/etc. for high volume sites.
Some things we've found: Page margins are a REAL pain (especially for labels!). It seems that only certain versions of Opera will allow you to modify page margins from CSS
Background images and colors aren't usually printed by browsers (to save ink) - There's an option in most browsers to enable printing BG.
In firefox look in about:config
print.printer_<PrinterName>.print_bgcolor
print.printer_<PrinterName>.print_bgimages
In IE I think it's under File->Page Setup...
Obviously, neither of these help you much as they can't be set by the site itself - It depends who the users are going to be whether or not you can ge tthis set intentionally. Failing that, you might try using a normal non-background image placed behind your content?
In my experience float doesn't work on printing - However, it's been a while since I've tried and it's possible this will now work as long as you provide an explicit width for your page (100%?) at present, I think most browsers use shrink-to-fit as default on print media.
Page width is another interesting one - I've only found very limited "width" properties that seem to work - at one point I almost resorted to tables. So far percentages seem to work fine, auto doesn't.
Try having a look Here and Here for some solutions and Here for a browser compatability chart
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.