I have a website that renders perfectly in Safari, FF, Chrome, and Opera. However, in IE, my website renders slightly off.
HTML:
<div align="center" id="headerdiv"><div id="log"><font id="subtitleAttribs" onclick="login()">Login أدخل حساب</font></div>
<a class="infoHme"><font id="titleAttribs" onclick="home()">T h e<font color="#999999" size="6px"> | </font>A r t i s a n a t<font color="#999999" size="6px"> | </font>N e t w o r k</font><span>Home دار</span></a>
<div id="lang"><font id="subtitleAttribs" onclick="arb()">العربية</font><font color="#999999"> | </font><font id="subtitleAttribs" onclick="eng()">English</font></div></div>
CSS:
#log
{
float: left;
padding: 5px;
}
#lang
{
float: right;
padding: 5px;
}
#titleAttribs
{
color: #6699cc;
font-size: 26px;
}
#headerdiv
{
background-color: #faf8cc;
margin: 0px 45px 0px 45px;
}
In my code snippet there are four parts. First, "headerdiv" is the container. Second, "log" is the div that should be on the left. Third, "titleAttribs" is text that sits in the middle. Fourth, "lang" is the div that should be on the right.
"log" and "lang" float so that they are on each side of the "titleAttribs" text. My problem is that in IE "lang" ends up rendering below "log" and "titleAttribs" on the right. I test my code with a Mac so it is hard for me to test in IE. When I use a PC and run the .html and .css files in IE9, everything renders just fine. However, when I go to my website from the internet, IE has the rendering problem, which makes even more difficult for me to resolve.
Would anyone know an easy way to correct this issue without having to make too many changes. I understand that I could add widths, however I tried with no luck. Also, the website url is:
http://www.imkenliya.com/artisan_network.html
If you run the website in IE, you will notice that the English language button below the search box is not in the yellow banner to the right of the title, which is the rendering problem.
Thanks,
I figured out my problem through persistent trial and error. Basically, IE read my html differently from the other browsers. By ordering the information in my html page differently, IE was able to render it properly. The ordering follows:
container, div float: left, div float: right, middle info
Originally, I had the following:
container, div float: left, middle info, div float: right
This seemed logical, however not to IE. Additionally, the other browsers still render my html properly.
Use a CSS reset sheet (like this one => http://meyerweb.com/eric/tools/css/reset/).
Also separate styles from your HTML markup (ditch div align="center" and the font tag. Replace them with proper CSS).
If this doesn't solve it, please provide a link to the site.
Related
I need to figure out how to to put label text next to checkbox button. I need the text in the middle of the checkbox button. I always got the checkbox a little above the text or little below it. Hard to get it exactly in the middle. When I fix in to the middle in one browser, in other browser it doesn't exactly in the middle. There is always a pixel or two that ruins it.
Here's the fiddle
http://jsfiddle.net/JhPHm/
<style>
.field input
{
margin: 0;
padding: 0;
vertical-align: top;
}
.field label
{
margin: 0;
padding: 0;
vertical-align: top;
font: normal 12px/14px arial;
}
</style>
<div style="padding: 30px;">
<div class="field">
<label for="x"><input type="checkbox" id="x" name="x" value="1" /> Text in the middle</label>
</div>
</div>
Please help me get the text in the middle in all browsers. Here a picture with the differences:
http://img708.imageshack.us/img708/5410/checkbox.png
Instead of vertical-align:top, try vertical-align:middle. It may help a bit, but input elements are notorious for being uneven across browsers.
Aligning input elements is tough, and sometimes nearly impossible.
If the problem is that it's misbehaving in old browsers, consider that people browsing the web with these browsers will stumble upon misaligned checkboxes on more places than just yours. They are browsing the web while it's crumbling around them so to speak. They won't care because they either know they're using an old browser or they don't notice because all sites show these tiny glitches.
If you're going to have to add all sorts of tweaks and fixes for various browsers to get to an acceptable end result, also consider that all these tweaks add to the size of your CSS and to the complexity making it tougher to maintain in the future.
In the end for me, this stuff depends on the audience, the budget and obviously the amount of checkboxes. ;-)
The way I've hacked around this is to use relative positioning, like this:
input[type="radio"], input[type="checkbox"] {
cursor: pointer;
line-height: normal;
margin: 0px;
position: relative;
top: -3px;
}
For example, if you want to shift them up 3 pixels. Like you've pointed out above, you might get different results in different browsers.
In this situation, Firebug or Chrome Developer Tools is going to help you a lot. There may be some garbage you're inheriting from elsewhere. Like in the example above, I set the margin back to 0px because something higher up (and unavoidable) in the CSS structure was setting a margin of 4px on all input and screwing me.
Good luck!
a little css problem that i cannot quite find on SO - although I assume it has been asked before, apologies.
So, here is the html:
<html>
<body style="color:white">
<div class="a" style="width: 70%; background: blue;"><p>helloes helloes helloes</p></div>
<div class="b" style="width: 70%; background: pink;"><p>talk talk talk</p></div>
<div class="a" style="width: 70%; background: blue;"><p>yay! yay! yay!</p></div>
</body>
</html>
lovely.
If i open this in ff, i get three vertically stacked divs - but with space in between them! This is not what i wanted! Drama-rama!
ie renders this as i'd expect, which raises some alarm bells.
ie is 9, ff is 11
cheers,
andrew!
UPDATE a lot of mentioning the "p" tag - why/how is the p tag affecting anything? Isn't it wrapped by the div, and the div has the background color applied? Shouldn't, in fact, the div just be internally bigger, but with no space between adjacent divs?
UPDATE:
So i tried this html instead:
<html style="margin:0px; padding:0px;">
which didn't fix the issue, and also this:
<body style="color: white; margin:0px; padding:0px;">
which also didn't fix the issue - shouldn't the css be inherited by the "p" tag in both cases? Interestingly, i also examined the resultant css with firebug, and the p tags all have a margin and padding of 0...
ideas?
UPDATE: a lot of responses asking me to set padding to 0. This doesn't work. Any more answers stating that and i'll down vote 'em.
UPDATE: the question is really specific about using inline css. I don't actually care for inline css myself, but why is everybody providing css stylesheets for their answer?
UPDATE: somebody mentioned -webkit, and while i'm not using a google chrome at all, it is an interesting idea. I cannot see any ff related extra css that might be causing this problem, anybody have any ideas?
I tried it with Chrome and saw the same behavior. After looking at the underlying CSS (F12), Chrome is applying the following two lines to the <p> tag:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
If I add the following to the css the blank lines go away:
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
Hope that helps!
Basically the P tags are by default taking margin. Add css
p{margin:0px; padding:0px;}
This is because of the auto-generated margin of a <p> element.
Firefox (and others) do this differently than IE.
You can "reset" this simply by doing a p{margin: 0} in your css.
You can do the same for all elements at once (which I recommend) by simply adding * { margin: 0; padding: 0;} in your css.
Small tip: Install a browser extension to inspect the behavior of your elements such as Firebug.
Your <p> tags have vertical margins. Vertical margins in CSS collapse, so that child margins can sometimes apply to parents. See http://www.w3.org/TR/CSS21/box.html#collapsing-margins
I resolved this be specifying a CSS 'line-height' I just set it to the same as the font size and then I got consistent DIV spacing across all browsers.
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.
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 am writing a footer div that displays info from the database. The footer has a different background color than the rest of the page, and will have a height that depends on how much content the database throws to it. When I generate the content with php and call for a border around the footer div, the content appears and is, let's say, 400px high, but the div border appears as a 1px high rectangle at the top of the div.
How do I get the height to auto-fit the content?
<div id="footer">
<?php
$an_array=array();
$tasks=mysql_query("select stuff from the db");
while($row=mysql_fetch_assoc($tasks)){
extract($taskrow);
$an_array[]=$task;
}
$an_array=array_chunk($an_array,4);
foreach($an_array as $dtkey=>$dtval){
echo "<dl>";
foreach($dtval as $dtvkey=>$dtvval){
echo "<dt>".$dtvval."</dt>";
}
echo "</dl>";
}
?>
</div>
This is what I get. The area below the red border should be filled with a color.
border image http://www.kevtrout.com/tortus/div.png
By popular demand, here is the css:
#footer{
border-top: 10px solid #d8d8d8;
background:#5b5b5b;
/*overflow:auto;*///Added this after seeing your answers, it worked
}
dl.tr{
width: 255px;
height:160px;
background: #5b5b5b;
margin:0px;
float:left;
padding: 10px;
}
dt.tr{
font-weight: normal;
font-size: 14px;
color: #d8d8d8;
line-height: 28px;
}
edit: I am using firefox on a mac
Check your footer CSS... if you have overflow set to anything but auto/scroll, then the DIV won't grow.
If not try using something other than DL/DT since DT's are inline elements, they won't push your div to fit content.*
e.g. just try using a DIV instead, if the footer grows, you have your answer.
(note: I revised order of suggestions)
*(I realize spec-wise, that this Shouldn't be an issue, but there wasn't an indication of which browsers this was occuring in, thus I would not be at all surprised if IE was rendering differently than expected for example)
Without seeing the CSS, my guess would be that your <dl>s are floated to get them side-by-side. The containing <div> then won't expand to contain them. If this is the case adding a clear:both; before the final </div> should fix it, like this:
<div style='clear:both;'></div>
The browser doesn't care if your content is generated by PHP or comes from a static HTML file.
The issue will most likely be in your CSS. Either the content you put in the footer has positioning properties (like float:left or position:absolute) that place them "outside" the div or the div has a fixed size and/or overflow properties set.
I'd suggest posting your CSS file here or (if it's too large) put it up somewhere where we can take a look. The finished HTML (you could just save a static copy of the output if your system isn't online yet) wouldn't hurt either.
By the way, your use of the <dl> element is wrong: you are missing the <dd> element. Items in the definition list always consist of one definition term and one or more definitions (which, in your code, are missing).
Also, rather than using <div style='clear:both;'></div> as suggested by Steve, I'd suggest explicitly stating the height of your <dt> elements. This way, the floats don't have to be cleared.