On this LIVE DEMO you can see an icon, which is several times bigger on IE 11 than on any other normal browser (FF/Opera/Chrome)
Size must be 12 em as seen on code, but it differs quite a bit between browsers:
.titlePanel [class^="icon-"]:before,
.titlePanel[class*="icon-"]:before{
font-size: 12em;
left: 79%;
line-height: 100%;
margin: 0 0 0 50px;
position: absolute;
z-index: -5000; }
As explained on this one of the many bugs on our beloved IE, pseudo-selectors apply multiple CSS rules when sizing, if there are multiple selectors applied to a pseudo-selector:
https://connect.microsoft.com/IE/feedback/details/813398/ie-11-css-before-with-font-size-in-em-units-ignores-css-precedence-rules
To avoid this I have changed, as seen on here, to a single rule for pseudo-selectors contained on nav, and anothe single one for those contained on .titlePanel:
nav [class*="icon-"]:before,
nav [class*="iconH-"]:before {
float: right;
font-size: 2em;
line-height: 50%;
margin: -5px 7px 0 0;
position: relative;}
.titlePanel [class^="icon-"]:before{
font-size: 12em;
left: 79%;
line-height: 100%;
margin: 0 0 0 50px;
position: absolute;
z-index: -5000; }
Related
When I zoom out or zoom in the browser some of the web content messed up. How to fix this?
Here's the CSS of the home page (first link)
.footer-image{
position: relative;
width: 100%;
}
.homeheaderh1{
float: left;
font-weight: bold;
color: #d31716;
margin: -520px 0 0 100px;
/* display: initial; */
line-height: 1em;
}
.homeheaderh3{
font-weight: normal;
margin: -320px 0 0 100px;
position: absolute;
line-height: 1.20em;
}
.homeheaderbutton{
float: left;
margin: -220px 0 0 100px;
position: absolute;
}
.homeheaderp{
float: left;
margin: -60px 0 0 100px;
position: absolute;
font-weight: bold;
}
Here's the CSS of 2nd link
padding-top: 10px;
margin: -550px 0 0 500px;
color: #FFF;
position: absolute;
margin: -450px 0 0 400px;
color: #FFF;
line-height: 0.10em;
position: absolute;
font-weight: 300;
Here's the pages where the web contents are messed.
http://bit.ly/1KJjaOZ
http://bit.ly/1KCVhJv
When I view the source in the browser
view-source:http://homecredit.ph/testEnvironment/products-promos/standard-loan/
on line 168 it says
<div style="width: 115.80%;">
Usually I would avoid setting widths to greater than 100%, because then, it and all it's contents inherit that width, often resulting in the content not fitting on the screen/container.
As the CSS is inline, and not coming from a CSS style sheet, this could be trickier to fix. You need to find out
- Where that style is coming from, and it might also be useful to know
- Why is it there? (too often I 'fix' one thing, only to break 10 more. This is especially true of CMS themes) But nonetheless I would go with 100% width (or less, e.g. with margins also). If that breaks stuff temporarily, I would just work with it, fixing whatever gets broken, because otherwise you'll be layering fixes (most of which may be unnecessary), on top, all because of, e.g. one bad fix like the 115% width container.
As far as responsive CSS in general is concerned, look into 'media queries', and best practices, e.g. 'mobile first'.
I have a div containing some text with individual letters having a background/border effect as illustrated in the screenshot:
Both the parent div and the individual numbers have a line-height of 1. See CSS below:
.jobcount {
font-weight: 300;
line-height: 1 !important;
-webkit-text-size-adjust: none;
vertical-align: top;
margin: 0 0 25px 0;
overflow: hidden;
b {
line-height: 1;
padding: 3px 4px 2px 4px;
-webkit-text-size-adjust: none;
font-weight: normal;
display: inline-block;
margin-right: 2px;
border-radius: 2px;
background: #A4CD39;
position: relative;
color: #016699;
&:before {
opacity: 0.2;
border-top: 1px solid #016699;
position: absolute;
content: "";
top: 50%;
left: 0;
right: 0;
bottom: 0;
width: 100%;
margin: 0 auto;
}
}
}
On both mobile iOS and Android (less pronounced on Android, but still present) there is additional space below the numbers, causing the background to extend below where it is desired. For an example of how it should appear (and does on all 4 desktop browsers), see:
What am I missing on mobile browsers that is causing line height to differ?
Many bold fonts do have slightly different metrics than their non-bold counterparts. So one solution would be to find a font where the heights are identical for bold.
Or indeed, as David Millar mentioned in the comments, assign a height to the b element. If you do, make sure that you also give it display:inline-block or the height will be ignored.
.loading-icon {
pointer-events: none;
margin: auto;
display: inline-block;
width: 32px;
height: 32px;
border-radius: 16px;
position: relative;
margin: 50px 0;
line-height: 25px;
In firefox and chrome, the object is centered in the page, whereas on IE10 the object is not centered and appears towards the left
You have 2 margin attributes. Chrome and Firefox handle it one way and IE handles it another.
Delete the duplicate and change the first to:
margin: 50px auto;
Also as mentioned in the comments, change display: inline-block; to
display: block; or just delete it.
http://www.coffeeproteindrink.com/method-athlete/
I am trying to remove the open space below the main wrapper, in Firefox it shows about a 20px open area, with a verticalscroll bar on the main page in order to see it.
In IE there is a visible 115px area, with no scroll bar.
My goal is to have the main_wrap + footer sit flush to the bottom of the page, but nothing I am trying is seeming to help.
#main_wrap {height: 390px;
background: url(images/content_back.png) repeat-y top left;
margin: 0 0 0 240px;
opacity: .8;
position:absolute;
top:325px;
overflow: hidden;
}
#main
{position: relative;
width: 680px;
padding: 0 40px 5px 40px;
font: normal 12px Verdana, Arial, sans-serif;
line-height: 20px;
display: inline-block;
z-index: 2;
}
#footer
{
width: 680px;
padding: 25px 40px 0 0px;
font-size: 12px;
position: relative;
height: auto;
clear: both;
bottom:50px;}
Example of what I am trying to accomplish: http://www.bio-genix.com/
Thanks for any help,
Ken
Turns out you don't need a sticky-footer technique because your background image is stretching to the screen, meaning you can use height: 100% and it's reliably set to the full height.
So, seeing that, bottom: 0 will work on #main_wrap. The next puzzle was where the phantom 60px or so of bottom margin was coming from; finally, after tweaking, it was determined that overflow: hidden would hide the additional height that was developed by the margins and paddings within the #main_wrap element.
This is what ended up working (the h2 part a fix for a fix):
#main_wrap {
position: absolute;
height: 390px;
bottom: 0;
margin-top: 0;
margin-bottom: 0;
overflow: hidden;
}
#main {
padding-bottom: 0;
}
#main_wrap #main h2.section_title {
margin: 20px 0 40px
}
http://jfcoder.com/test/methodsite.html
I have a parent div (nav) that is 1000px. Within that there is a child div (nav-drop-panel), and within that one another child (drop-panel-col). Basically, the drop-panel-col is a list of links in navigation. As there is a specific height, I can only add so many links before adding another column (so there's 1-4 drop-panel-col divs within nav-drop-panel).
I want the nav-drop-panel div to size itself according to the number of columns within it. So if there's only one, it's smaller than if there's 4. It will never exceed or even come close to the 1000px width of its parent div (nav). For some reason, if I don't set nav-drop-panel to a specific width (which makes it too big for one column), it assigns itself an arbitrary width and all of my columns are pushed down and it looks terrible.
I've tried a few solutions to other related questions from here, but nothing has worked so far.
My HTML:
<div class="nav-drop-panel">
<div class="drop-panel-col">
<a class="cat">Vehicle Graphics</a>
Pick-Up Truck
Van
Enclosed Trailer
Box Truck
SUV
Car
Boat
Bus
ScratchGuard™ Magnets
Vinyl Lettering and Graphics
<p></p>
</div>
</div>
My CSS:
#nav {
padding: 0;
margin: 0;
list-style: none;
width: 1000px;
z-index: 15;
font-family: Verdana,Arial,Helvetica,sans-serif;
/* position: absolute;
left: 0px;
top: 0px; */
}
#nav .nav-drop-panel {
background-color: #FFFFFF;
border-bottom: 3px solid #BBBBBB;
border-bottom-right-radius: 10px;
border-right: 3px solid #BBBBBB;
height: 431px;
margin-bottom: 0;
padding-bottom: 7px;
padding-top: 19px;
/* position: absolute;
top: -5px;
left: 218px; */
}
#nav .drop-panel-col {
color: #333333;
float: left;
font-family: Arial;
font-size: 14px;
padding-left: 24px;
}
#nav .drop-panel-col a{
color: #333333;
display: block;
font-weight: bold;
height: 19px;
margin-bottom: 5px;
margin-left: -4px;
padding-left: 30px;
padding-top: 0;
width: 202px;
}
Greatly appreciate any help or ideas, thanks. :)
EDIT: Just showing what I did to remove the positioning. I had just commented it out to see if it would at least expand, and work from there.
Absolutely-positioned elements are no longer part of the layout. The parent element has no idea where, or how large they are.
You need to use JavaScript to calculate all of this an adjust the size of the parent accordingly... or use a layout that doesn't use absolute positioning.
Adding display: inline-block; to .nav-drop-panel seemed to do the trick; I've also reduced the printed code slightly(margin-left, margin-top, etc reduced to margin: etc etc etc etc;). To see your unaltered, but working(as in just with the display: inline-block; added) version, click here.