Ive got an issue whereby I have an inline-block with a margin that displays correctly in Safari and Firefox..but in IE for some reason the margin is a lot larger, that is the width is much wider in IE.. In fact the whole page in IE is displayed as if the browser window is a lot larger.
My CSS looks like below:
.wpcontainer {
display: inline-block;
width: 80%;
margin-left: 10%;
margin-right: 10%;
padding: 1%;
background-color: #FFFFFF;
}
Any help much appreciated!
i think you should give the link or whole code so that I can check on my computer what the problem is. And there is an issue in your CSS that is width 80% + margin 20% + padding 2% = 102%, actually it should be like this
.wpcontainer {
display: inline-block;
width: 78%;
margin-left: 10%;
margin-right: 10%;
padding: 1%;
background-color: #FFFFFF;
}
Related
I have a block in a mat-table in Angular that makes a colored square.
When adjusting its height, e.g.
display: inline-block;
width: 10px;
height: 97%;
it works well in Chrome and Edge. However, it disappears in Firefox.
Setting the height to px makes it appear, i.e.
height: 65px;
Setting:
-moz-height:100%;
for the column class also makes it disappear in Firefox.
It seems that height must be set in Pixels for Firefox using 'height' or it disappears.
Even using:
-moz-height: 50px
doesn't keep it from disappearing from Firefox if height isn't present.
A useful alternative was em - it seems that whereas % doesn't work with Firefox - em works a bit like % across all browsers.
e.g. height:4em
However, the block does not extend vertically as much as it should - and it adds additional size to the row.
There are many instances of Chrome and Firefox rendering height differently, e.g. here, here, here, here, and here.
Perhaps, the most useful answer is here which explains why implementation varies across browsers.
The recommended solutions there are to ensure that parent element height has been set - as I did here:
//for the table
.example-table {
flex: 1 1 auto;
overflow-y: auto;
min-width: 100%;
height: 100%;
}
// for the mat-table in the table
.mat-table {
margin-bottom: 1rem;
display: table;
border-collapse: collapse;
min-width: 100%;
height: 100%;
}
And setting the box-sizing, e.g.:
-moz-box-sizing:content-box; or -moz-box-sizing:border-box;
The problem was with Firefox. One issue was that nested divs in any of the columns / cells affected Firefox rendering differently than Chrome and Edge (which worked as predicted).
Removing all nesting where possible helped somewhat. Using the -[moz-transform][1] methods helped make things more similar across browsers (though not emulating the same behavior).
This helped:
.block {
display: inline-block;
width: 30px;
vertical-align: middle;
-moz-transform: scaleY(1.2);
-moz-transform: translateY(5px);
height: 95%;
margin-top: 5px;
margin-bottom: 1px;
}
where the column is defined as:
td.mat-column-block {
flex-shrink: 1;
align-self: stretch;
vertical-align: center;
max-width: 50px;
min-width: 50px;
border-top: none;
height: 50px;
max-height: 50px;
min-height: 100%;
justify-self: stretch;
}
My private webpage's main content is not displaying strangely within Firefox. The header and footer bar both display and the main text is placed adjacent to them towards the right. Occasionally, the footer also moves above the main text. I'm guessing this is all one issue involving the positioning of DIVs that I'm somehow missing. [This has been solved]
The height of two DIVs that are equally as tall when displayed in Chrome is also different. This issue also occurs in Safari but in a different way. There is a 1 px gap between the logo and the navbar that isn't present when viewed in Chrome or Firefox. Can anyone think of a way to reset all of the browser defaults to prevent similar things from happening in the future?
The website is currently not online yet and I'm debugging it for final release. (I don't really want to release this in the current condition as it will frustrate anyone who doesn't use a webkit browser.)
Also, as a side note, anyone know how to fix the CSS errors I'm getting in Internet Explorer 9? The gradient in the nav bar is gone, some areas have missing background color, and all picture links have annoying boxes around them.
EDIT: I saw in an online CSS gradient generator what I need to do to make the gradients work in IE9. The background issue apparently stems from the same source.
Also, is anyone in Opera experiencing issues with the latest debug version at http://jsbin.com/ipixay/1? (Credit for this one goes to Sunyatasattva.)
The link to the fiddle (where the code is posted at) is: http://jsfiddle.net/aaQSD/7/ Please forgive me for the amount of CSS that's still there, but I can't tell which causes the Internet Explorer 9 problems.
My best guess is that the Firefox problem lies somewhere in this section of CSS:
body {
margin: 0;
padding: 0;
text-align: center;
font-family: Times;
background: #efefef url(pics/background.png) repeat top center;
}
#container {
overflow:auto;
width: 95%;
min-height: 100%;
min-width: 946px;
margin: 0 auto 10px auto;
}
#content-wrapper {
width: 100%;
float: right;
text-align: left;
margin: 10px 0 0 0;
}
#content-inner {
padding: 0 15px 0 15px;
}
.center-slide {
font: normal 62.5%/1.5 Times;
letter-spacing: 0;
width: 900px;
height: 485px;
position: relative;
padding: 20px 0 0 0;
margin: 0 auto 0 auto;
background-color: #FFFFFF;
border-radius: 8px;
}
.boxes {
margin: 0 auto 0 auto;
width: 900px;
}
.left-box {
float: left;
background-color: #FFFFFF;
border-radius: 8px;
margin: 10px 5px 0 0;
padding: 20px;
width: 500px;
position: relative;
}
.logo {
width: 26%;
text-align: center;
float: left;
font-family: Times;
font-size: 65px;
font-weight: bold;
color: #FFFFFF;
padding: 10px 0 0 0;
background-image: -moz-linear-gradient(0% 22px 90deg, #0B3474, #517ABA);
background-image: -webkit-gradient(linear, 0% 0%, 0% 70%, from(#517ABA), to(#0B3474));
}
header {
width: 100%;
min-width: 863px;
background-color: #000047;
float: left;
padding: 10px;
color: #FFFFFF;
text-align: left;
font-size: 20px;
overflow: hidden;
margin: 0 0 10px 0;
}
nav {
background-color: #6a6a6a;
font: 16px Times;
min-width: 700px;
float: right;
width: 74%;
}
footer {
font-family: Times;
text-align: center;
background-color: #000047;
color: #FFFFFF;
text-align: center;
padding: 10px 0;
width: 100%;
min-width: 863px;
}
Here is the list of things that have been fixed:
Unwanted boxes/borders around picture
Firefox display issue
Glitchy footer
EDIT: I'm currently working on making a fiddle with the minimal code to replicate the issue as suggested in the comments. I hope you can forgive me for my noobish mistake. Thanks, everyone who have responded so far!
EDIT 2: The fiddle is out! I've removed the pandora's box of code that used to be below.
The header and footer are displayed adjacent to the main container
Is there a reason why they are floated? Removing the float: left rule from the header, makes the container stack below it. If they need to be floated for some reason I am not seeing, perhaps you should consider adding a clear?
Logo height different from navbar element heights
This piece baffled me a bit: I think the culprit is browser default line-height property, which, on Chrome, is coincidentally making your elements align.
Your nav elements have a set line-height of 61, plus a vertical padding of 12 on both sides, adding up to 85px. Your logo has no defined line-height and a font-size of 65px plus a padding-top of 10px. In Firefox this is 10px short.
To fix this, just set the line-height to your logo element as well.
Here is a working JSBin of your code:
Working example
Internet explorer problems:
Missing gradient
Missing background
Annoying border
I don't have IE9 at hand right now, so I might look into it later if you need it, but here are my guesses.
As for the missing gradient, your CSS specifies only webkit and mozilla vendor prefixes. You might want to take a look at the -ms– prefix as well, and check which rules really need it and which don't.
I am skipping the missing background part because it's quite vague and I am not testing on IE right now.
As for the border around linked images, you could perhaps add this rule to your CSS:
a img {
border: 0;
outline: 0;
}
EDIT:
Safari annoying one pixel gap
As for the Safari annoying one pixel gap, it apparently comes from the fact that Safari doesn't calculate well your float: left + width: 26% plus float: right + width: 74%. Adding a .1% to the first element width fixes the problem, but it is not the most elegant solution.
The best solution for your problem at hand is to just float both your elements left. You can see an updated fiddle working in Safari:
Working example
I have edited your fiddle for it to work. I essentially just added float: left; to your #container. You can look at my edits for further details. http://jsfiddle.net/aaQSD/8/
I'm back with more questions!
It's likely something very simple, but it has confused the hell out of me. I have a layout set-up so that the H2 text on pages and posts (Wordpress) has a background image next to it on both sides, accomplished by use of span:before and span:after.
Here is how it is working correctly and what I would like the overall CSS to achieve:
http://www.weburton.co.uk/content/demo/?page_id=121
This is currently achieved by min and max-widths in the CSS. And I've had the width part set to auto, where it is under a parent element with the width of the page. I don't understand how the lines aren't automatically resizing based on the H2's width. See, the problem here:
http://www.weburton.co.uk/content/demo/?p=36
Here is the CSS that is used:
#pagewrapper{
width: 960px;
margin: 0 auto;
position: relative;
padding-top: 140px;
text-transform: uppercase;
}
h2 span:before{background:url("http://weburton.co.uk/content/demo/wp-content/themes/epic/images/header_bg.jpg") repeat-x scroll left center transparent;content:" ";height:1px;margin-right:15px; left: 0%; position:absolute; margin-top: 15px; min-width: 25%; max-width: 50%; width: auto; }
h2 span:after{background:url("http://weburton.co.uk/content/demo/wp-content/themes/epic/images/header_bg.jpg") repeat-x scroll right center transparent;content:" ";height:1px; margin-left:15px; right: 0%; position:absolute; min-width: 25%; max-width: 50%; width: auto; margin-top: 15px; }
Basically, I've exhausted all options that I can think of. Is there something I'm missing here or is there another way to go about achieving this styling using something else but span that is easier?
Oh and I know I have some redundant styling calls, I'm in the process of cleaning it up. :)
Thanks in advance! :)
May be that is what you want
Remove min-width and max-width from h2 span:before and h2 span:after
h2 span {
position:relative;
}
h2 span:before {
left: -25%;
width: 20%;
}
h2 span:after {
right: -25%;
width: 20%;
}
without a fiddle it's hard to give you a definite answer, but I think that if you try changing the display property to display: inline-block it should do the trick.
This will cause the element to act as a block element while still being displayed inline (thus preserving your current layout - block elements typically take up the full available width and are followed by linebreaks).
I have this site...
http://willruppelglass.com/
and it looks good in IE9, 8, 7, Firefox but in Google Chrome and Safari (if you scroll over to the right side) you will a blank space, why is it doing this and how do I fix it?
any help would be appreciated, thanks in advanced,
J
So apparently this issue is in all browers..here is my body css code...
body{
font-family: 'ArialNarrow';
background-color:#ebebeb;
padding:0;
margin:0;
}
Does anyone know how to fix it?
I added a screen shot on what my issue now is..
The problem has nothing to do with your body but it lies with your .headerNav
.headerNav {
color:
black;
margin: 0 auto;
width: 1280px;
padding-top: 140px;
padding-left: 230px;
}
You give it a width of 1280px but then you give it a padding-left of 230px which makes the actual width = 1510px which is adding the horizontal scrollbar to the site.
I would recommend the following
.headerNav {
color:
black;
margin: 0 auto;
width: 1050px; /* decrease the width of the div to compensate for the padding-left */
padding-top: 140px;
padding-left: 230px;
}
I hope this helps you.
I have this site...
http://willruppelglass.com/
it looks good on my machines and all browsers I tested but someone told that the black header doesn't go all the away across the header. What am I doing wrong....before in all browsers there was a big white space to the right...so I changed this..
.headerNav {
color:
black;
margin: 0 auto;
width: 1280px;
padding-top: 140px;
padding-left: 230px;
}
to this
.headerNav {
color:
black;
margin: 0 auto;
width: 1050px; /* decrease the width of the div to compensate for the padding-left */
padding-top: 140px;
padding-left: 230px;
}
but now the header doesn't appear to go all the way across
The browser in question is Safari 5.1.5.
any help would be appreciated, thanks in advanced,
J
here is a screen shot on what I am dealing with...
1 rep says that he is shrinking the browser smaller than 1050px and then scrolling to the right, which is something that is not fixable (the width of <body> cannot be larger than the viewport). The same thing happens with the background for the header and footer of Stack Overflow.