I have a site I'm working on where I have some text that needs to view close to the same size on all browsers. I'm using 1.6em as the font size in the pics below. The problem is that in IE 11 the font appears way larger than in it does in Chrome/FF/Safari. I have tried every font sizing option I can think of, such as; px,vh,vw,vmin,% but, all still render larger in IE 11 than all other browsers. Does anyone know a good work-around for this?
Not sure if it makes a difference but I am using a google font instead of a regular font.
Sample in Chrome (this is how it should look)
Sample in IE 11
My HTML:
<div class="banner-wrap">
<div>
<h1>Where Compassion Lives</h1>
</div>
<img class="banner" src="assets/images/banner_title_home.png">
<img class="greg" src="assets/images/greg-transparent.png">
</div>
MY CSS:
.banner-wrap {
position: relative;
width: 100%;
max-width: 796px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.banner-wrap div {
font-size: 1.6em;
position: absolute;
bottom: 59px;
left: 0px;
width: 100%;
height: auto;
z-index: 40;
font-family: 'Kaushan Script', cursive;
color: #FFF;
letter-spacing: 0.2em;
opacity: 0.9;
text-align: center;
text-shadow: 1px 1px 1px #999;
}
.banner-wrap img.banner {
position: absolute;
bottom: 59px;
left: 0px;
width: 100%;
height: auto;
z-index: 30;
}
.banner-wrap img.greg {
position: absolute;
bottom: 30px;
right: -50px;
width: 19vmin;
max-width:180px;
height: auto;
z-index: 40;
}
Nevermind...figured it out. since I was assigning the font-size using the selector div the user-agent style for the h1 tag was overriding my div font-size style. Changed my font-size style to use the h1 selector and all is good.
Related
I am having weird problem on my website when loading it on UC browser. The article texts are cut off from the middle and looks like the div becomes half the size of defined size in only UC browser. I am adding image and code structure. Please help me out to fix this as I care about good user experience. Check out the website article link on UC browser mobile ...
Article link -->
https://elomymelo.com/soundcore%20motion%20plus%20review.html
CSS
.articles-container
{
position: absolute;
left: 0px;
top: 992px;
width: 2358px;
height: 4836px;
overflow: visible;
border: 0px white solid;
background: transparent;
border-radius: 50px;
z-index: -1;
}
.main-article-div
{
position: absolute;
left: 56px;
top: 280px;
width: 2235px;
border: 0px grey solid;
}
.art-text-div
{
position: relative;
font-family: 'Roboto', cus-roboto, sans-serif;
font-size: 90px;
color: rgba(255,255,255,0.60);
padding-left: 45px;
padding-right: 20px;
text-align: left;
padding-top: 280px;
width: 2235px;
border: 0px grey solid;
word-spacing: normal;
line-height: 139px;
}
last two divs are inside articles-container div. All of them are screwed big time ...
For some reason instead of only being able to click the links by clicking on the text, you can also click below it on empty space.
My friend said I had to reduce div size but I'm not quite sure on what he meant.
#video {
position: fixed;
right: 0;
bottom: 0;
min-height: 100%;
min-width: 100%;
}
#devil,
#steam,
#youtube {
display: block;
margin-left: auto;
margin-right: auto;
height: 230px;
width: 230px;
position: relative;
}
#steam,
#youtube {
text-decoration: none;
font-family: cursive;
font-style: oblique;
}
#devil {
border-radius: 120px;
top: 250px;
right: 20px;
}
#steam {
top: 280px;
left: 10px;
}
#youtube {
top: 50px;
left: 115px;
}
a:link,
a:visited {
color: forestgreen;
}
<div>
<img id="devil" src="img/frizzy.jpg">
</div>
<div>
<a id="steam" href="https://steamcommunity.com/id/impenetrable" target="_blank">steam</a>
<a id="youtube" href="https://www.youtube.com/c/ItsFrizzy" target="_blank">youtube</a>
</div>
Your problem is probably in here:
#devil,
#steam,
#youtube {
display: block;
margin-left: auto;
margin-right: auto;
height: 230px;
width: 230px;
position: relative;
}
You shouldn't need to set the height or width for your links, since they will be automatically set based on the text. You can use something like firefox tools to look at the bounding block of your links and see what's giving them the big space to click. You can even mess with the parameters here to suit your liking.
In your css, you specify height: 230px; for your element that holds the link. Decrease this size to remove the blank space that also responds to your mouse.
As suggested, use a border or background color to help indicate where your elements are, or use the development console (F12 in Chrome) to find your element sizes.
Instead of setting height to links you should set font-size for them and if this didn’t help set line-height same as font-size value.
You are getting a height on your anchors because you are applying a height to them (you should remove this). Also, I wouldn't use absolute or relative positioning for this as you do not need it. I would envelope your image and your social links in their own containers and position them. Here is an example of what I am talking about.
.container {
margin-top: 20px;
}
#video {
position: fixed;
right: 0;
bottom: 0;
min-height: 100%;
min-width: 100%;
}
.social_container {
margin: 0px auto;
padding: 10px;
width: 200px;
}
#steam,
#youtube {
margin: 0px auto;
width: 80px;
display: inline-block;
text-decoration: none;
font-family: cursive;
font-style: oblique;
text-align: center;
}
#devil {
border-radius: 120px;
display: block;
margin-left: auto;
margin-right: auto;
height: 230px;
width: 230px;
position: relative;
}
a:link,
a:visited {
color: forestgreen;
}
<div class="container">
<img id="devil" src="img/frizzy.jpg">
</div>
<div class="social_container">
<a id="steam" href="https://steamcommunity.com/id/impenetrable" target="_blank">steam</a>
<a id="youtube" href="https://www.youtube.com/c/ItsFrizzy" target="_blank">youtube</a>
</div>
I am designing a responsive website for a client where the image needs to be resized according to the width of screen.
I set the image to max-width:100% and height:auto and it's working perfectly in chrome but not in mozilla.
Here is the link http://touchtalent.cloudvent.net/
Also, there is a similar question at
Image mysteriously ignoring max-width in Firefox & IE
And, according to it's answer, I tried to give it's parent a width of 100%, but that doesn't help.
Here is my HTML code
<div id="wrapper">
<header>
<section class="banner1">
<img class="banner" src="img/banner1.jpg" alt="banner1"/>
<div class="tag1">
BECAUSE YOU HAVE
</div>
</section>
<section class="banner2">
<img class="banner" src="img/banner2.jpg" alt="banner2"/>
</section>
<section class="banner3">
<img class="banner" src="img/banner3.jpg" alt="banner3"/>
<div class="tag2">
A
</div>
<div class="tag3">
CREATIVE GENIUS
</div>
<div class="tag4">
INSIDE YOU
</div>
<div class="tag5">
<div class="btn_join">
JOIN US
</div>
</div>
</section>
</header>
</div><!--wrapper-->
Here is its CSS
* {
float: left;
}
header {
max-width: 100%;
}
img.banner {
max-width: 100%;
height: auto;
display: block;
}
.banner1, .banner2, .banner3 {
max-width: 100%;
position: relative;
}
.tag1, .tag2, .tag4, .tag3, .tag5 {
width: 100%;
font-family: "HeroLight", sans-serif;
font-size: 40px;
color: #FFF;
position: absolute;
text-align: center;
left: 0px;
bottom: 20px;
height: 40px;
}
.tag2 {
top: 20px;
}
.tag4 {
top: 160px;
}
.tag3 {
top: 70px;
font-family: "sixties", sans-serif;
font-size: 80px;
}
.tag5 {
bottom: 60px;
}
.tag5 .btn_join {
background: #FFF;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
-ms-border-radius: 40px;
-o-border-radius: 40px;
border-radius: 40px;
color: #000;
font-size: 23px;
font-family: "HeroLight", sans-serif;
width: 198px;
height: 53px;
line-height: 60px;
position: relative;
left: 50%;
margin-left: -99px;
cursor: pointer;
}
#media screen and (min-width: 500px) and (max-width: 1200px) {
.tag1, .tag2, .tag4, .tag3, .tag5 {
width: 100%;
font-family: "HeroLight", sans-serif;
font-size: 25px;
color: #FFF;
position: absolute;
text-align: center;
left: 0px;
bottom: 0px;
height: 40px;
}
.tag2 {
top: 15px;
}
.tag4 {
top: 100px;
}
.tag3 {
top: 45px;
font-family: "sixties", sans-serif;
font-size: 50px;
}
.tag5 {
bottom: 25px;
}
.tag5 .btn_join {
background: #FFF;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
-ms-border-radius: 40px;
-o-border-radius: 40px;
border-radius: 40px;
color: #000;
font-size: 23px;
font-family: "HeroLight", sans-serif;
width: 198px;
height: 53px;
line-height: 60px;
position: relative;
left: 50%;
margin-left: -99px;
cursor: pointer;
}
}
#media screen and (min-width: 1201px) and (max-width: 1400px) {
.tag1, .tag2, .tag4, .tag3, .tag5 {
width: 100%;
font-family: "HeroLight", sans-serif;
font-size: 35px;
color: #FFF;
position: absolute;
text-align: center;
left: 0px;
bottom: 15px;
height: 40px;
}
.tag2 {
top: 15px;
}
.tag4 {
top: 125px;
}
.tag3 {
top: 55px;
font-family: "sixties", sans-serif;
font-size: 60px;
}
.tag5 {
bottom: 25px;
}
.tag5 .btn_join {
background: #FFF;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
-ms-border-radius: 40px;
-o-border-radius: 40px;
border-radius: 40px;
color: #000;
font-size: 23px;
font-family: "HeroLight", sans-serif;
width: 198px;
height: 53px;
line-height: 60px;
position: relative;
left: 50%;
margin-left: -99px;
cursor: pointer;
}
}
#wrapper {
width: 100%;
min-width: 1000px;
overflow: hidden;
}
Please help!
You have float:left applied to all elements. Floated blocks occupy as much width, as needed by their content. In this case, image initial width "spreads" on the parent section.
And max-width on replaced block elements (such as images) doesn't make them occupy all the space - it just makes them not to widen more, than soe value. width:100% does
Try removing the float rule and give images width:100%
I had the same problem and after reading this bugzilla report https://bugzilla.mozilla.org/show_bug.cgi?id=975632 I found out that if the image is nested in a table or a {display: table;} property is applied, then the max-width trick doesn't work because the table adapts to its content size.
So I hunted down this property in my DOM via dev tools in Firefox and I found a {display: table;} on one of the very first divs. Some attempt to scale the website ? I'm using currently TikiWiki CMS, an old version (12).
Anyway, correcting the CSS to {display: block;} made the {max-width: 100%} rule now work, and so finally I get the small images keeping their sizes and the big ones resizing to the container width.
As it took me some time to find out, I just thought let's share this if it can avoid others to loose time on this !!!
add this to your css
body, html {margin: 0; padding:0; width: 100%;min-width: 100%;max-width: 100%;}
img.banner {
width: 100%;
min-width: 100%;
max-width: 100%;
height: auto;
display: block;
}
.banner1, .banner2, .banner3 {
width: 100%;
min-width: 100%;
max-width: 100%;
position: relative;
}
also as also mentioned remove the float?
* {float: left;}
This is completly working, however, you set a minimum width on your #wrapper div content.
Remove it from the main.css line 550 and it will work
CSS
#wrapper {
width: 100%;
/* min-width: 1000px; to remove */
overflow: hidden;
}
You must use image width="100%" like ().
It must work for you. Gud Luck
For my issue (and using a bootstrap derivative), I didn't want my images scaled to 100% when they weren't intended to be as large as the container.
For my xs container (<768px as .container), not having a fixed width drove the issue, so I put one back on to it with javascript & jQuery (less the 15px col padding).
// Helps bootstrap 3.0 keep images constrained to container width when width isn't set a fixed value (below 768px), while avoiding all images at 100% width.
// NOTE: proper function relies on there being no inline styling on the element being given a defined width ( '.container' )
function setWidth() {
width_val = $( window ).width();
if( width_val < 768 ) {
$( '.container' ).width( width_val - 30 );
} else {
$( '.container' ).removeAttr( 'style' );
}
}
setWidth();
$( window ).resize( setWidth );
Add this to your css.
body {width: 100%;)
Your elements are displaying as 100% of your parent element. Webkit renders this properly, but Chrome requires you to explicitly state the width of your body to achieve the proper result.
(My DIVs keep on changing position when I resize my page)
So I have seen loads of people with the same problem but they always have a different code so I have a problem getting the answer through their code. Is there anyway to stop them from moving? Maybe because I have the position be from the bottom of the page up or the left...? I have two different DIV's doing this so I might as well add both:
.page {
width: 150px;
height: 50px;
background: orange;
position: absolute;
left: 156px;
top: 43px;
line-height: 50px;
text-align: center;
}
.contact {
background-color: #E6E6E6;
width: 230px;
height: 200px;
position: absolute;
margin-right: 10px;
right: 150px;
top: 200px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 15px;
}
I have a problem with some css in my website
this is the main CSS source :
/* html selectors ---- */
html, body {
font-family: 'Arial Unicode MS';
margin: 0;
padding: 0;
background-repeat: repeat-x;
background-color: white;
direction: rtl;
font-size: 10.3pt;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
h1 {
font-size: 17pt;
text-decoration: underline;
top: 3px;
padding-bottom: 10px;
line-height: 25px;
}
h2 {
font-family: david;
font-size: 11pt;
color: #191970;
}
h3 {
font-size: 16pt;
color: white;
margin-left: 15px;
font-weight: bold;
margin-bottom: 20px;
padding-right: 30px;
padding-top: -55px;
font-family: 'Arial Unicode MS';
}
/*page -----------*/
#page {
width: 900px;
padding: 0px;
margin: 0 auto;
direction: rtl;
position: relative;
z-index: 100;
z-index: 5;
background-image: url("images/bgimage.png");
}
#leftshadow {
width: 100px;
height: 900px;
background-image: url("images/leftshadow.png");
position: absolute;
right: 840px;
z-index: none;
top: -25px;
}
#rightshadow {
width: 100px;
height: 900px;
background-image: url("images/rightshadow.png");
position: absolute;
right: -45px;
z-index: none;
top: -25px;
}
My question is how can I move the image-shdow back, behind the main content?
I tried a lot with z-index but I couldn't find a solution, can you help me solve thos problem pleas?
You forgot to use a position property in addition to the z-index property .. z-index will not work unless the element which has the z-index property applied to it is positioned using either:
position: relative;
position: absolute;
position: fixed;
Add one of those (relative preferably in your case) and it will work.
I recommend reworking your DOM structure to accomodate for this case, something like this:
<div class="content">
<div class="page"></div>
<div class="leftshadow shadow"></div>
<div class="rightshadow shadow"></div>
</div>
check out this fiddle of the how the new structure might work - http://jsfiddle.net/wHgm8/
You could also, if you wanted a nice clean shadow around the page, use css3 box-shadow, example here: http://jsfiddle.net/ASc7J/ though support is for newer browsers.
try this in your code:
box-shadow: 5px 0px 5px grey;
in above syntax, 5px is for left, 0px is for top and bottom and again 5px is for right. Play with the values untill you are comfortable. Also make sure you use hex values of color and is apt for a shadow.
You need both a position command, and "none" is not a valid z-index value. -1 works for me.
style="position:relative; z-index:-1;"