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/
Related
Yesterday I discovered a layout issue with Chrome and Edge that doesn't show up in the Samsung Internet Browser and didn't exist before. The problem only occurs when using columns. Here's my CSS:
.div_columns {
width:500px;
column-count: 2;
column-gap: 20px;
}
.card {
height: 32px;
padding: 5px;
background-color: #f0f0f0;
margin-bottom: 8px;
}
.div_buttons {
position: relative;
height: 34px;
min-width: 50px;
float: right;
text-align: right;
background-color: #808080;
padding-top: 18px;
box-sizing: border-box;
}
.button {
position: absolute;
right: 1px;
top: 1px;
width: 16px;
height: 16px;
background-color: #f3f3f3;
}
And here is my HTML:
<div class="div_columns">
<div class="card"><div class="div_buttons"><div class="button"></div></div></div>
<div class="card"><div class="div_buttons"><div class="button"></div></div></div>
<div class="card"><div class="div_buttons"><div class="button"></div></div></div>
<div class="card"><div class="div_buttons"><div class="button"></div></div></div>
</div>
The output looks like this, and as you can see there appears to be only one button instead of four. But they all appear to be in the same position. Like I said at the start, this problem seems to be browser and use of columns related. So what is wrong here?
Another annoying thing I want to mention is that when I use Microsoft Edge's developer tools (F12) and want to copy a CSS rule by right-clicking, the developer tools close after that. This has not happened with Edge before and is not happening with Chrome.
I successfully restored these buttons to regular position by adding display:inline-block to the div_columns class.
As to the copy rule issue, I found it in my devtools, too. The only conclusion I've got is that if you right-click inside the braces {}, the context menu looks like below. The "Copy rule" option here works as expected:
But if you right-click outside the braces, the context menu changes like below. The "Copy rule" option here will lead to a crash of devtools (actually any option here will lead to a crash). But what's more interesting is that the style rule will still be on your clipboard. So I suggest sending a feedback to Edge team by pressing Shift+Alt+I in Edge:
In a situation like this i would just try to disable position relative position absolute and float right, and ill write something inside the buttons
i'd disable evrything till i find whats the problem
I’ve been pulling my hair out about trying to get a couple of elements to line up across browsers. I am working in Drupal 7, if that matters.
I am working on a local vbox vagrant machine, so I cannot link to the content. It also will not let me post a picture, so here are links to the two variations of what is being displayed:
The globe and social icons are fonts from Glyphicons and the ssrn icon is a png that I created to mimic them. My problem is they are not responding to margins the same way. I think it has something to do with having to give the glyphicons a negative top margin to line them up, but that leaves the ssrn icon out of line in some browsers. Is there a way to define margins based on webkit etc? I cannot find one.
HTML:
<div class="views-field views-field-field-website"> <div class="field-content"><div id="website">
</div></div> </div>
<div class="views-field views-field-field-ssrn"> <div class="field-content"><a href="http://test" title="test" target="_blank">
<div id="ssrn"></div>
</a></div> </div>
<div class="views-field views-field-field-linked-in"> <div class="field-content"><div class="bio-social">
<div></div> </div>
<div class="views-field views-field-field-twitter"> <div class="field-content"><div class="bio-social">
<div></div> </div>
CSS:
#website {float: left; width: 24px; margin: 5px 10px 5px 0; width: 48px; height: 48px;}
#website a::before {color: #00479A; font-size: 48px; margin-top: -14px;}
#website a:hover:before {color: #444444;}
#ssrn {height: 48px; width: 48px; float: left;
margin: 5px 10px 5px 0px; /* FIX CROSS BROWSER MARGIN ISSUE!!!!!! */
background-image:url('/sites/all/themes/seeblue_law_subtheme/icons/ssrn1.png'); background-size: 48px;}
#ssrn:hover {background-image:url('/sites/all/themes/seeblue_law_subtheme/icons/ssrn2.png');}
.bio-social {float: left; margin: 5px 10px 5px 0; height: 48px; width: 48px;}
.bio-social a::before {color: #00479A; font-size: 48px; margin-top: -13px;}
.bio-social a:hover:before {color: #444444;}
The following properties will not work in every scenario, but are included with Webkit.
-webkit-margin-before:
-webkit-margin-end:
-webkit-margin-after:
-webkit-margin-start:
-webkit-padding-before:
-webkit-padding-end:
-webkit-padding-after:
-webkit-padding-start:
You can look on this page for more information.
Also, are you resetting your CSS before you begin testing?
You could use http://browserclass.org/ which is a standalone JavaScript library. It will add extra classes to your body tag with the current name and version of the browser and with the used OS too, so you will be able to write specific css to handle the problem. This lib also has a Drupal module.
For example you can declare this in your css:
.ff.ff28.mac .bio-social { ... }
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'm in the process of doing some minor redesign on my site, and I'm struggling with using an iFrame to display a google map. The iFrame is showing in Chrome with no issue, but it isn't in IE9. Interestingly, I can see it start to load (and sometimes even see the "Map/Sat/Terrain" options show up that you get when it loads properly, but then the frame goes blank. I haven't changed the code for creating the map, and it works fine on my production version of the site in both Chrome and IE. It must be something with the new DIVs I'm using, but I just can't seem to find it. To see it in context, here are the two sites:
Production: http://www.findthefishing.com/guidepage.php?guideID=42
Redesign: http://www.findthefishing.com/guidepage2.php?guideID=42
Here are the relevant pieces of code:
<div id="guidepagecontent">
<div id="guidepagemapcont">
<div id="guidepagemap">
<iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=4000+Crandon+Blvd,+Key+Biscayne,+FL&hl=en&z=14&iwloc=A&output=embed"></iframe><br> View Larger Map</div>
</div>
#guidepagemapcont {
float: right;
width: 310px;
margin: auto;
position: relative;
}
#guidepagemap {
background-color: #ffffff;
padding:0px 0px 10px 10px;
font-size: 14px;
text-align:center;
}
#guidepagecontent {
padding: 10px;
font-size: 12px;
background-color: #ffffff;
position: relative;
}
I'd really appreciate it if anyone can give me some insight!
The HTML on your new page has quite a few problems:
No doctype declared
Two HEAD sections declared - one in the CORRECT place and one within the BODY tag
Fixing these and any other HTML issues may resolve your problem.
I have images that have statistics texts printed over them. This worked well with FF, Chrome and IE9 but not on IE8. I cant just seem to figure out what is the problem here.
HTML:
<div>
<div class="image">
<img src="#Url.Content("~/stuff/stuffImage.png")" alt="" />
<GIR1><span>#ViewBag.stuffArray[4]%</span></GIR1>
</div>
</div>
CSS:
.image {
position: relative;
width: 100%; /* for IE 6 */
}
GIR1 {
position: absolute;
top: 110px;
left: 50px;
width: 100%;
}
GIR1 span{
color: white;
font: bold 15px/15px Helvetica, Sans-Serif;
letter-spacing: -1px;
padding: 10px;
}
Instead of positioning the text inside the picture. It positions them outside it like normal text. What could cause the problem here?
I'm reasonably sure it's down to your usage of the custom element <GIR1>.
IE below version 9 does not natively recognize unknown elements.
You can either switch to <div class="GIR1"> (which would be the easy choice here), or:
You have to use a JavaScript fix: http://code.google.com/p/html5shiv/
Note that you'll have to add the custom element to the script yourself.
For the uncompressed version, see: http://www.iecss.com/print-protector/
var elems = 'abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video'
You need to add your custom elements to that list.