I have a problem with a page layout on the website I am working on.
Here's a link
The blue box on the right hand side is looking good in IE and Firefox, but it's too short (the text is too close to the bottom of the box) in Chrome, Safari and Opera.
Here's the code for the box:
#testimon {
background: url("../img/ttm_bg.png") repeat-x scroll 0 0 transparent;
border-radius: 15px 15px 15px 15px;
border-top: 4px groove #00D1FA;
box-shadow: 0 1px 4px 1px #555555;
font-size: 14px;
height: 788px;
margin-top: 26px;
padding: 3px;
text-align: center;
width: 262px;
}
#testimon h4 {
color: rgba(255, 255, 255, 0.92);
font-size: 19px;
margin: 8px 0 17px 0;
text-shadow: 1px 2px 2px #1A1A1A;
}
#testimon p {
font-family:Georgia, "Times New Roman", Times, serif;
color: rgba(0, 0, 0, 0.88);
line-height:25px;
font-size: 14px;
font-style: oblique;
font-weight: bold;
text-shadow: 0 1px 1px #CCCCCC;
}
#testimon .quote {
font-size:25px;
padding:4px;
}
#testimon .signature {
color: #e6e6e6;
font-style: normal;
margin-bottom: 15px;
text-shadow: none;
}
#testimon .spacer2 {
background: url("../img/stars.png") no-repeat scroll 98px 0 transparent;
height: 13px;
margin: 31px 0 15px 0;
width: 262px;
}
Thanks for any help!
The problem is less a cross-browser issue and more a styling issue - you've got a fixed height on that testimonials div, so what if someone has different fonts than you specify, or increases the font size on their browser, the text will spill over (as it did when I upped the font using Firebug).
The solution is to remove the height from the #testimon element, and ensure that the background repeats vertically (which it currently does not).
This is probably a font rendering related issue. The sizes are slightly different in each browser so the end overall height is different. I would remove the height value from #testimon.
I look at the site with Crome, Opera, Maxathon, Firefox, Safari, and I.E., all browsers are current version of the browser. The images and the text look good. The only issue I could see were in some of the browsers you had to click on the image two or maybe three times to make the image to zoom in.
You might want to clear the cache of the browser and close and re-open the browser.
Related
I am currently copying this site: http://www.onlinemeetingnow.com/register/?id=q6wpivs95c& here: http://beaminggeek.com/profitbuilder/test-2/
and using a WP tool called ProfitBuilder: http://wpprofitbuilder.com/
I have three issues here in particular.
1. I put margin-top: 20px; on my tag (to push it on the center) on the image below however when I do it adds up a margin on the both top and below:
Here's my code on that:
<h2 style="text-align: center; font-size: 40px; font-weight: bold;"><span style="color: #ffffff; ">The 4-Step Strategy We Used to Build a</span><br /> <span style="color: #ffffff;"> 7-Figure Coaching Business...</span><br /> <span style="color: #ffffff; font-size: 25px; "> (while ignoring ALL the conventional wisdom!)</span></h2><p style="text-align: center;"><a style="font-family: 'Open Sans Condensed'; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd800',endColorstr='#f7d100'); background: -moz-linear-gradient(center top,#ffd800 5%,#f7d100 100%); background-color: #ffd800; display: block; margin: 0 auto; position: relative; min-height: 33px; width: 280px; text-decoration: none; font-weight: bold; font-size: 30px; color: #fdffff; cursor: pointer; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border: none; padding: 17px 10px; text-align: center; z-index: 2; margin-top: 12px;" href="#">Claim My Spot Now >></a></p>
I also have some issues with this two section here as there are spaces all around:
Any idea what to move to make it look perfect using inline-CSS? YOu can use Chrome inspector tool to check this.
NOTE: The Profit Builder Tool is a tool that doesnt go with custom css panel with it meaning everything is just plain inline CSS.
You have a padding-bottom set for your Claim Your Spot Now button. So when you put a margin-top value on top of your h2 it pushes your p down as well and the padding-bottom of the p pushes down the following section
I think this should work
body {
margin: -1px 0 0 0
}
h2 {
margin: 25px 0 0 0;
}
.pbuilder_column {
margin: 0 0 -24px 0
}
See this example:
I have several boxes with white background and huge black, translucent box shadows that overlap the boxes above. However, this leads to an irritating behavior: While the white background gets darker through the overlapping box shadows, nested objects, like text or other boxes, don't!
Could anybody tell me why this occurs? I guess it has something to do with z-index. I would like prevent this - the nested objects should become darker as well. Any solutions?
Thanks in advance!
Here's the code: https://jsfiddle.net/xq20hvp4/3/
<div>Coloured text <span>Box with background</span></div>
<div>Coloured text <span>Box with background</span></div>
<div>Coloured text <span>Box with background</span></div>
<div>Coloured text <span>Box with background</span></div>
<div>Coloured text <span>Box with background</span></div>
CSS:
div {
margin: 20px;
box-shadow: 0 0 0 250px rgba(0, 0, 0, 0.3);
font-size: 25px;
color: red;
font-weight: bold;
font-family: Consolas, Arial, sans-serif;
background-color: #ffffff;
}
div span {
background-color: #e7e7e7;
color: #555555;
font-weight: normal;
font-size: 17px;
padding: 1px 5px;
}
It's because those elements are on top of the div with the shadow. In order to put them behind, you can use position: relative; on the background element and give it z-index: 1:
div {
margin: 20px;
box-shadow: 0 0 0 250px rgba(0, 0, 0, 0.3);
font-size: 25px;
color: red;
font-weight: bold;
font-family: Consolas, Arial, sans-serif;
background-color: #ffffff;
/* Add this */
position: relative;
z-index: 1;
}
div .box {
background-color: #e7e7e7;
color: #555555;
font-weight: normal;
font-size: 17px;
padding: 1px 5px;
}
Here's an updated fiddle: https://jsfiddle.net/6wwz8usw/.
https://jsfiddle.net/fd7tx2c2/
div {
z-index: 1;
position: relative;
}
Z-index
Position
I could nee some help. I'm trying to get my page display the same in Firefox as in Chrome. The page using a imported font from Google and I'm not able to force it to look like the same.
Left is Google Chrome and right (how it is supposed to be) Firefox
And I have no idea now to fix it.
The affected CSS:
#big_header{
display: inline-block;
text-align: center;
margin-top: 40px;
margin-bottom:30px ;
background-color: #858585;
padding: 20px;
padding-top: 0px;
padding-bottom: 0px;
font-family: exocet;
font-size: 8em;
line-height: 100%;
text-shadow: 0 -1px 1px #666666, 0 1px 1px #FFFFFF;
color: white;
white-space: nowrap;
}
#big_header::first-line{
font-size: 180%;
}
And here the used Google Font:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
I hope that some of you could help me :)
I need to center vertically the text inside a div but I am having a problem. This is the situation:
There is an hover attribute that I added in the CSS and in fact, when the mouse goes on the div, it changes the background and the text goes at the center of the div.
I would like the text to be centered also in the first case shown in the picture (when the mouse in not over the div). You can find the fiddle with the code here: Fiddle
.tab {
float: left;
margin: 0px;
height: 50px;
display: table-cell;
line-height: 50px;
}
This is the code that I have used for the div. And when the mouse goes over:
.tab:hover {
cursor: pointer;
box-shadow: inset 0 0 10px #999;
-moz-box-shadow: inset 0 0 10px #999;
-webkit-box-shadow: inset 0 0 10px #999;
background-color: #555;
line-height: 50px;
}
I have used the line-height in both cases but it works only in .tab:hover. Any idea?
That happens because you are setting after a declaration for the font:
.font_header {
font: 19px Century Gothic, sans-serif;
color: #EEEEEE;
}
This CSS is after and then the specificity goes with the declaration here. If you just change the order it will work, since the last has more precedence:
.font_header {
font: 19px Century Gothic, sans-serif;
color: #EEEEEE;
}
.tab {
float: left;
margin: 0px;
height: 50px;
display: table-cell;
line-height: 50px;
}
UpdatedFiddle
You need to set the line-height: 50px; for .font_header as well.
Example fiddle: http://jsfiddle.net/6tzwc17c/2/
At least in Chrome it works if you just split the font declaration, like:
font-family: Century Gothic, sans-serif;
font-size: 19px;
Instead of:
font: 19px Century Gothic, sans-serif;
CSS reset (yahooReset) is not working in cross browsers mainly between IE and chrome, why are all the div elements and fonts comparatively bigger in chrome? How can i make both browsers compatible? Appreciate any suggestions. See my code below:
div#topBar {
border: 1px solid black;
margin: 0.2em auto 0em;
height: 6em;
background: #74756c;
}
.logo {
font-family: 'Cinzel', serif;
/* google font*/
color: #191970;
font-size: 350%;
padding: 0em 0.3em 0em;
background-color: #E6E6FA;
text-shadow: 0 0 2px 8px white;
border: 1px solid #4195fc;
}
div#box {
margin: 0.6em 0em 1em 1em;
}
nav#navigation {
float: right;
font-size: 140%;
margin: 15px 6px 0px 0px;
}
<body>
<div id="topBar">
<div id="box">
<b class="logo">RaGa</b>
</div>
<nav id="navigation">
Home
Imprint
Privacy
Terms & Conditions
</nav>
</div>
</body>
I think some changes will help you
change font-size value in px
change em to px
remove <b> tags. This is very old.
I have found the answer. In my code I wrote below code
body { font-size:12px }
/* this will create problems in cross browser rendering */
Google chrome got default font size of 15px which wont allow your code to render below this, but IE does.
I heard Google stopped support to below code to reset default font size.
* {
-webkit-text-size-adjust: none;
}