I'm building Magento website and it's working perfectly fine in Firefox and Chrome, but it's not showing correctly in IE9, IE8.
Body font size is set to 12px but IE seems to ignore it completely.
Here's the CSS of body element:
body {
background: url(../images/background/bkgd.gif) repeat-x scroll left top #FFFFFF;
font: 12px/1.55 arial, helvetica, sans-serif;
color: #444;
text-align: center;
}
Here is the website. Can anyone please help?
There are inline styles in your HTML/Template. View source and search for 20px I found on line 99 something like below:
<div a align="right">
<span style="font-weight:bold; font-size:12pt;">Your local No1Pizza is <span style="font-weight:bold; font-size:20px;"><a href="/pizza.html">Wolverhampton.<span/>
<a style="font-weight:bold; font-size:8pt;" href="/index.php/emptybasket/ ">
(Not your desired shop?)
</a>
</div> </div>
You REALLY need to clean up the code. Also pay attention on the wrong closing tag <span/> above.
Related
On a webpage I am making, the CSS-containing HTML for a headline is as follows:
<div class="headline">
<span style="color: #00f">◼ </span>This is a headline
</div>
The ◼ is for the Unicode character ◼, the Black Medium Square. This is showing up fine on Firefox, IE, and Opera, but on Chrome it's showing as a hollow square, the "don't know this character" symbol. I'm running all the browsers on Win7Pro.
What is the simplest way to accommodate Chrome and get it to show this symbol? I've tried using ∎, ∎, which is close, but it's a rectangle that isn't a square and therefore won't suffice.
I'm using the Arial font at the moment. If I need to use another font just for this character and just for Chrome that would be fine but how? Or if the closest that's possible is ∎, and I therefore have to put up with Chrome users getting a rectangle that isn't quite a square (which some may feel serves them right for using such a browser), what's the simplest way to target Chrome to achieve that?
It's a pretty simple symbol you need - why not render the square with HTML and CSS?
.square {
display: inline-block;
width: 10px;
height: 10px;
background-color: black;
}
<span class="square"></span>
Per this SO answer, you just have to pick a range of fonts that should have the character. I used his example and it worked on Windows 7:
.force-square {
font-family: DejaVu Sans, Symbola, Everson Mono, Dingbats, Segoe UI Symbol, Quivira, SunExt-A, FreeSerif, Universalia, unifont;
display: inline-block;
}
.imitate-square {
width: 7pt;
height: 7pt;
background: #000;
display: inline-block;
}
<div>
◸◹◺◻◼◽◾◿☀
</div>
<div style="font-family: DejaVu Sans, Symbola, Everson Mono, Dingbats, Segoe UI Symbol, Quivira, SunExt-A, FreeSerif, Universalia, unifont;">
◸◹◺◻◼◽◾◿☀
</div>
<div>Imitated: <div class="imitate-square"></div></div>
<div> Forced: <div class="force-square">◼</div></div>
You might want to try the Hex version:
'◼'
I can't seem to make it appear properly, so go here: http://www.fileformat.info/info/unicode/char/25FC/index.htm
I have an issue with the rendering of a tag on my page in IE. The problem lies in the following; the tag, in IE does not fill the tag. The picture is the link but in IE the text takes precedence and overrides the image to make the text a link. Chrome and FireFox have no issues and render fine. My question is:
How can I make the image the link in IE and get it to work like it does in Chrome and FireFox?
The following images showcase my problem:
The problem in IE:
How it should render as per Chrome and FireFox:
The code for the section is as follows:
h1#site-name, div#site-name /* The name of the website */
{
margin: 0;
font-size: 2em;
line-height: 1.3em;
height: 115px;
background: url('/sites/default/files/images/ipark2-theme-assets/iPark_title.jpg') no-repeat top right;
margin-left: 212px;
color: transparent;
}
#site-name a:link,
#site-name a:visited
{
color: transparent;
text-decoration: none;
display: block;
height: 100%;
filter: alpha(opacity=50);
font-size:1em;
}
EDIT: addition of html markup:
<div id="logo-title">
<div id="logo"><img src="/sites/all/themes/zen/ipark2/logo.png" alt="Home" id="logo-image" /></div>
<div id="site-name"><strong>
Teaching and Learning Innovation Park
</strong></div>
</div> <!-- /#logo-title -->
</div></div> <!-- /#header-inner, /#header -->
You're applying an ID to two elements (your H1 and your div), make use of classes as at the moment you're just slapping an ID on everything.
I'm not sure if that will solve your issue, but it won't hurt and I know older versions of IE are more strict about recognizing an ID if it's not unique. Since you're targeting your anchor tag through that ID, it just makes me question if it isn't the issue.
I've made my website to completely support Google Chrome instead of Firefox or IE. Call me because now i've found that wasn't really smart: my website looks totally different on Firefox.
There aren't big differences, but a lot of items are misplaced with a few pixels. This doesn't sound that bad, but it is. For instance, this is how Chrome shows the page (look at the red button): http://d.pr/i/YNha and this: http://d.pr/i/8YZO is how Firefox shows the page. As you can see there are a few differences with the position of the image.
I really don't know what causes this, and i've already searched the web for similar problems without finding any solution.
This is the CSS that is used for the image:
.img (
margin-top: -130px;
margin-left: 520px;
}
Any help would be appreciated.
UPDATE
HTML & CSS:
<div style="background-image: url(http://linehotel.org/c_images/veiling_item.png); height: 401px; border-radius: 10px;">
<div style="color: white; padding: 12px;">
<center><img src="/c_images/veiling_teas.gif" /></center>
<img src="/c_images/bod_teas.gif" /><br>
<h1>
<div style="z-index:1;width: 64px; height: 96px; float: left; margin-top: -25px; background: url(http://habbo.it/habbo-imaging/avatarimage?figure=sh-295-85.hr-802-31.ch-3015-82.hd-180-2.lg-275-92&gesture=sml&size=b&img_format=gif);"></div>
Xice: <br>0 credits</h1>
<img src="/c_images/closed.png" style="margin-top: -130px; margin-left: 520px;" />
</div>
</div>
<meta http-equiv="refresh" content="5;URL='/veiling'">
<center><font size="1px"><i>De pagina update in real-time. Je hoeft zelf niet de pagina te herladen.</font></i></center>
With the lack of information this isn't definitive but here's my answer.
Browsers use different default values for margins, paddings and other css styles. To help your site render the same in each browser you can try using reset css. Here is an example,
* {
padding: 0px;
margin: 0px;
font-size: 12px;
font-family: "Trebuchet MS"
}
This will set the values for every element on the screen effectively ignoring any browser defaults. Then any class and inline style override these in turn.
For more extended reset styles have a look here, http://www.cssreset.com/
The issue is connected with rendering font in different browsers. I was surprised to see the issue is reproduced only in Chrome. It works fine in Firefox, IE8, Safari and even IE6.
Here comes the sample.
And here comes the code itself:
<div style="position:absolute;bottom:2px;padding-top: 1px;width:100%;">
<span style="float:left;">
<div id="saveCustomizationButton" class="smallBlueButton">
<span>Speichern</span>
</div>
</span>
<span style="float:right;padding-right:1px;">
<div id="downloadOrPrintButton" class="smallGreenButton smallGreenButtonSmallLetterSpace">
<span>Downloaden oder drucken</span>
</div>
</span>
</div>
div.smallGreenButton span, div.smallGreenButton a {
display: block;
line-height: 14px;
padding: 1px 7px 2px 13px;
}
div.smallGreenButton {
font-family: arial,sans-serif;
font-size: 12px;
font-weight: 600;
}
div.smallBlueButton {
font-family: arial,sans-serif;
font-size: 12px;
font-weight: 600;
}
That is it. I've read about css reset, and have tried it. Any miracle -nothing's changed. Another way I was considered to use was fixing the width of the container tag. But due to the necessity to maintain multiple localisations I can't use this approach.
I hope smb will propose a solution. Or I'll need to implement some browser-specific behavior.
Waiting for your comments. Thanks in advance.
Text rendering does differ from browser to browser.Sometimes no matter how much we try to change the rendering, we won't get it. You can read this article if you want. It does not provide a solution(I don't think there is one) to this problem but it highlights the differences.
I have SPAN wrapped into another SPAN:
<span id="outer">
<span id="inner">
Some long text
</span>
</span>
And CSS:
#outer {
font-size: 20px;
font-family: 'Times New Roman';
line-height: 30px;
}
#inner {
font-family: 'Times New Roman';
}
This variant renders exactly the same in Opera, Safari, Chrome, FF.
Text is rendered exactly 30px lines height.
If outer SPAN is set another font-family, for example Arial:
#outer {
font-size: 20px;
font-family: 'Arial';
line-height: 30px;
}
Crome and Safari renders text as 31px line-height.
FF - 30.5px line-height
Opera - 30px (as expected)
Why this happens?
Note: this markup and styles is created by user in WYSIWYG editor.
JSFiddle - right rendering
JSFiddle - wrong rendering
If you look at the image below, you will notice that both fonts have different baseline heights. It appears that Times New Roman is about 2px shorter than Arial.
I'm not an expert on the font rendering engines, but my best guess as to what is happening is that the 1-2px additional pixels applied to the #outer is caused by Arial being 2px taller.
Even though the font within the #inner is Times New Roman, the rendering still has an affect on the outer div due to it being set as Arial.
Hopefully this gives you some insight as to where there are additional pixels in your line-heights.
The line-height value applied is the declared value, as you can see by using developer tools in browsers. The rest is rendering differences that probably have nothing to do with inheritance and are probably not controllable by authors.