CSS Padding variations between Chrome, Firefox + Safari - css

I'm using font-face + CSS. Text padding appears fine in most browsers except Safari and Chrome on a Mac, where it's rendering the top padding with an extra 20px or so... This is the piece of CSS in question:
p.style10 {font-family: 'TitilliumText22LThin', Arial, sans-serif; font-size: 17px; line-height: 19px; color: #FFFFFF; padding: 20px 40px 10px 10px}
Here's how it appears incorrectly in Chrome/Safari (Mac): http://siddharthkhajuria.com/srv/chrome.png
And correctly in Firefox (Mac): http://siddharthkhajuria.com/srv/firefox.png
Any help/suggestions on why it's appearing with extra padding in Chrome/Safari on a Mac?
Thanks!
Sidd.
-- here's the relevant bit of html too:
<!-- START OF PROMOS 1 -->
<div class="g320" style="background-image:url(img/p1.png);
width:310px;
height:354px;
overflow:hidden;">
<p class="style9"><strong>'Bootylicious' by Tom Rosenthal</strong><br /><br />A video for Tom's reworking of the Destiny's Child classic. I directed (with Tom), filmed and edited it.<br /><br /><br /></p>
<p class="style10"><strong>BBC at the Edinburgh Fringe</strong><br /><br />I produced the website for the BBC at the 2011 Fringe Festival. I also made a range of films and took photos on-site throughout the fortnight.</p>
</div>
<div class="g640">
<iframe src="http://player.vimeo.com/video/37423313?title=0&byline=0&portrait=0" width="630" height="354" frameborder="0"></iframe>
</div>
<div class="g320"></div>
<div class="clear"> </div>
<!-- END OF PROMOS 1 -->

Use CSS reset to avoid this kind of problem. CSS Reset is important in removing inconsistent margins, paddings, line-heights, and other attributes that can cause your web pages to look differently across various browsers. Create a different CSS file and name it 'reset.css' and add it at the top of your all other css file's links using
<link rel="stylesheet" href="your_domain/css/reset.css">
Go to this link to get a ready made reset CSS file and more at here all about CSS reseting.

For anyone who found the reset.css didn't work, I found that it helps setting heights on elements which are showing inconsistent padding between browsers. I could see a big difference in padding between Chrome and Safari and this fixed it.

Related

How to a get padding to display the same in Firefox and Chrome?

I have a web page with a text box. The background is black and the text is white. It displays correctly in Chrome and Safari, but for some reason the display is way off in Firefox. For arguments sake that could be reversed, that it is correct in Firefox but not Chrome or Safari - I am just going with the majority for now.
Here is the HTML:
<div class="col-sm-6 black">
<p style="text-align:center">Each unit is full of character and convenience with original hardwood floors, 10’ ceilings, washer/dryer and walkability to local restaurants and shops. </p>
<p style="text-align:center">Rents range from $825 – $950/month.</p>
<p style="text-align:center">Call us to reserve your unit: </p>
<p class="estilo big" style="text-align:center">919-292-2200</p>
<p class="estilo" style="text-align:center">or through Facebook messenger.<br />
facebook.com/thelutterloh</p>
</div>
Here is the CSS:
.black { background-color: #000; padding: 15px 15px 65px 15px; }
This is how it looks in Chrome and Safari:
This is how the same code renders in Firefox:
I have looked extensively for a solution and have have seen nothing that would resolve this. Also, Mozilla does not have a -moz specific styling that can be applied.
Any help would be appreciated.
The inconsistency in the font-size seems to be causing the height of the .black div to increase in case of firefox (since the font-size appears to be higher). The padding added on top of this increases the total height of the div.
I would recommend using normalize.css or CSS resets before doing any of your styling to avoid such scenarios.
Another workaround is for you to set box-sizing: border-box and set a max-height on the .black div., along with overflow:hidden.
You can also use #font-face which will help keep your font consistent between browsers instead of the browser using its default. https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face

No proper solution for IE clickability over background image

I have done everything I could to make a decent web page validated with W3C validator etc and tried to make a responsive design and did all i could to enhance SEO onsite and off site. But all my efforts go down the drain with stupid IE ! I am using IE 8 now. How I wish internet bans IE for its various vagrancies !
My problem is I am not able to get a solution for clicking on elements laid over a div background image. Whether I use background color or not. If I use -ms-filter with opacity, the div disappears !
Somebody please give a proper solution ! I have tried posting the issue in another question. I just got one suggestion that did not work. Hence I am trying again.
My code
HTML
<div id="header">
<h1 style='float:left;margin-left:20px;color:white;font-family:verdana'>Landshoppe</h1>
<div id="smshare">
<img src="share.png" width="20" height="20" alt="Share on Social Media">
<div id="smp"></div>
</div>
<div style="clear:both"></div>
<div class="header-small-image">
<img src="images/bldg1.jpg" width="180" height='170' alt="Landshoppe"><br>
<div style="font-size:bold;text-align:center;margin:1px;width:100%">Landshoppe</div>
<div style="clear:both"></div>
</div>
<div class="opaq">
BLOGS
LOANS
SEARCH PROPERTY
FREE LISTING
</div>
<?php include('searchbox.php');?>
<div style="clear:both"></div>
</div>
CSS
#header{background:url('images/Thane2.jpg') no-repeat;background- size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o- background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Thane2.jpg ',sizingMethod='scale') no-repeat;-ms- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Thane2.jpg',sizingMethod='scale') no-repeat;height:350px;border:1px solid black;margin-bottom:30px;}
#header h2{font-size:35px;color:white;text-align:center}
#searchbox{text-align:center;padding:5px;width:60%;margin:0px auto;margin- top:20px;z-index:5}
#searchbox input[type=text]{width:80%;padding:10px;font-size:25px;border- radius:1px;float:right;height:30px;margin-right:2px;border-radius:5px}
#searchbox input[type=submit]{float:right;
background: url("images/searchicon2.jpg") no-repeat;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/searchicon2.jpg',sizingMethod='scale') no-repeat;-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/searchicon2.jpg',sizingMethod='scale') no-repeat;
width:55px;
height:51px;
border:none;border:1px solid whitesmoke;
cursor:pointer;
padding:0px;
border-radius:0px;-webkit-border-radius:0px;-moz-border-radius:0px;-0-border-radius:0px;;
}
My site is www.landshoppe.com
Your header element has pointer-events: none; set in the css.
#header {
...
pointer-events: none; //remove this line
}
Remove pointer-events: none; from header and then click events will work within it.
Also this issue isn't IE specific. Didn't work for me in Chrome either. pointer-event: none makes that element and its child elements not clickable, and clicks to fall through to the underlying element.
#Arathi, I found a solution by putting all the events inside the div into another within this div and making its position:absolute. Now it works ! Though I have some issue in mobile responsive design. Guess I will tackle that as next level :)

div gets extra padding only in Chrome and only on home page

we've got an issue that only effects Chrome, Firefox and IE are fine.
the only page affected in Chrome is the home page, index.html... all other pages use the exact same header html and CSS. If we click a link on the home page to go to an interior page, the page works fine, then we click back to the home page and it looks fine... but if we refresh the home page, its messed up again.
here's the url
http://www.logilityconnectionseurope.com
the element that gets pushed down is a big div that holds an image and some text on the right side, the div CSS is as follows
.dateLogoTopDiv {
float:right;
text-align:right;
margin-top: 15px;
}
HTML:
<div class="header">
<img src="images/connections-europe-2013-logo-web.jpg" width="410" height="242" alt="connections europe 2013 logo" />
<div class="dateLogoTopDiv">
<img src="images/logility-logo.jpg" width="105" height="108" alt="logility logo" />
<p>14-15 May 2013</p>
<p>Hotel Le Plaza </p>
<p>Brussels, Belgium</p>
</div>
</div>
as I said, works fine in Firefox and IE and works in Chrome on every page except the index
any help would be appreciated
Run your page through the HTML Validator and fix all errors. Without valid HTML, browsers don't know for sure what you intended to display and you'll have cross-browser rendering inconsistency. In this case, Webkit browsers (Chrome & Safari).
http://validator.w3.org/
EDIT:
OP's site previously contained malformed HTML including open tags and misplaced tags. OP's site has since been fixed, rendering the code at the URL posted in the question obsolete.
EDIT 2:
I'm seeing the OP's issues in Chrome. I cannot explain why the issue was occurring or why it was intermittent. However, I fixed it by adding the following...
Additional CSS:
.header {
overflow: auto;
}
.header > img {
float: left;
}
Existing HTML:
<div class="header">
<img src="images/connections-europe-2013-logo-web.jpg" width="410" height="242" alt="connections europe 2013 logo" />
<div class="dateLogoTopDiv">
<img src="images/logility-logo.jpg" width="105" height="108" alt="logility logo" />
<p>14-15 May 2013</p>
<p>Hotel Le Plaza </p>
<p>Brussels, Belgium</p>
</div>
</div>
This takes the two main header elements and floats them left & right respectively. The right one was already floating to the right. overflow: auto; is a trick to force the header to expand to contain it's floated elements. Since both are floated, they are outside the regular content flow and would not normally cause the header to expand.

IE 7 Displays Hidden and Display None Elements

I have an element on my page that has "display:none" and "visibility: hidden" applied to it. Yet IE 7 still displays the element. Not only does it display the element, when I open developer tool bar and inspect said element it tells that it is indeed not displayed and not visibile.
Furthermore, When it's in its original state I can't use the selector tool in the developer tool bar to select the element, until I manually remove the "display:none" and "visibility: hidden" rules.
It's as if IE 7 is interpreting my style sheets correctly but the rendering engine is flagrantly ignoring them
Here's the CSS
.ModalTypeTwo .button-wrapper { display: none; visibility:hidden; }
Here's the mark up
<div class="MyModal ModalTypeTwo" id="sb-wrapper" style="top: 20px; width: 926px; left: 328px;">
<div class="footer wrapper">
<div class="corner left"></div>
<div class="corner right"></div>
<div class="button-wrapper" id="btnContents">
<a title="contents" id="sb-nav-button">
<span>Contents</span>
</a>
</div>
<div class="button-wrapper" id="txtContents">
<div id="sb-title">Lorem Ipsum </div>
</div>
<div style="cursor: pointer;" onclick="Modal.next()" class="button-wrapper" id="btnNext">
<a title="Next"><span>Next</span></a>
</div>
<div style="cursor: pointer; display: none;" onclick="Modal.previous()" class="button-wrapper" id="btnPrevious">
<a title="Previous"><span>Previous</span></a>
</div>
</div>
</div>
Notice that the above rule should apply to #btnContents, #txtContents, #btnNext, and #btnPrevious, however in IE& only the later 3 are hidden.
Try applying overflow: hidden; on ModalTypeTwo. I had a similar problem in IE7 and hiding the overflow of the parent fixed it.
http://jsfiddle.net/UugDU/
I added some start and end text just to make sure the result was being rendered at all.
I have no problems in IE7. It must be a problem somewhere else in your code. I suggest you start with the full version of your code, and whittle it down to the minimum required to produce the error and post that.
If this helps future Googlers of this issue, the problem is with how Internet Explorer versions 4-7 interpret "visibility:hidden" in CSS. Those older browsers will hide their immediate content, but not their HTML children's content. In addition, IE5 had a weird "reverse" bug to that problem where adding "visibility:visible" to an immediate content element under the hidden parent would not be visible. That is based on my knowledge of the issue and could have more subtleties I missed.
In general, if you are testing in IE7 browsers, try and avoid showing and hiding things using "visibility". If you must hide something in those older browsers, just remove them completely using "display:none", which was almost always universally reliable in these older browsers. Or, if they must be accessible in the page for IE7 users, just not shown to them, you can move them quickly off the page using CSS as shown below. Note: This will not affect your page design or layouts.
position: absolute !important;
top: -9999px !important;
left: -9999px !important;

Webkit browsers pushing a bullet to the right

The website that I'm currently working on is having a few issues with Webkit browsers (Chrome, Safari, etc.)
One of those issues is that I have a bullet list that is displaying strange.
The top bullet item is going to the right of the list rather than the left.
(source: jamespwright.com)
I can't seem to fix it. I've tried overflow:hidden, I've tried list-style-position:inside, nothing seems to work.
EDIT
I will try to provide some of the code but it's a pretty huge site that is built with DotNetNuke so I might not be able to give you too much information.
The code in question is this:
#PremiumServicesMenu .LinkList ul {
margin-top: 0px;
margin-left: 1em;
_margin-left: 3em;
margin-bottom: 0px;
}
/* Safari and Chrome specific settings */
#media screen and (-webkit-min-device-pixel-ratio:0)
{
.PremiumServicesContainer .LinkList ul {
list-style-position: inside;
}
}
and the html for that section is this:
<div id="PremiumServicesMenu">
<div class="PremiumServicesContainer">
<span class="Corporate">
<div id="PremiumServicesHeader">
<div class="PremiumServicesShim"></div>
<div class="PremiumServicesTitle">Premium Services</div>
<div class="EndCap"></div>
</div>
<div class="LinkList">
<ul>
<li>AIMS</li>
<li>Feed Lab Analysis</li>
<li>MSDS</li>
<li>Prior Cargo</li>
</ul>
</div>
</span>
</div>
</div>
The problem seems to be with page height. On the other browsers if the page is not very tall, this Premium Services section still retains a height that fits everything, but in Webkit if the page is short, this section shortens itself and puts the first item next to the Premium Services header image rather than on the line below it. If the page is long enough, then this issue doesn't occur.
The answer was in the floats.
The ul needed to have clear:both; added to it.

Resources