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;
}
Related
I use markdown with css, output html sometimes.
But when display in browser, a space prefix to my code segment, only first line. In the pic below, it just before "gconftool".
If I disable css, here is no space anymore. So it really comes from css. Of course I checked html, no space character here.
Below is my css.
pre {
display:block;
/* overflow:auto;*/
width: 90%;
margin-left: 5%;
background-color:#333;
padding: 0.1em 0.5em 0.1em 0.5em;
word-wrap: break-word;
/* border-color: #080;*/
/* border-style:dotted none;*/
border-left:0.5em solid #080;
}
code {
background-color:#333;
color: #eee;
font-family: 'Courier 10 Pitch',"Courier New",Monospace;
text-shadow: none;
}
So how can I get rid of this space.
append:
I had solved it. thanks jsfiddle.net, thanks all.
You have a margin and padding here:
em,strong,code {
margin: 0px 0.2em 0px 0.2em;
padding: 0px 0.4em 0px 0.4em;
font-weight:bold;
font-style: normal;
}
Are they there for any need? Because when I remove those two your spacing is gone. Below a fiddle.
https://jsfiddle.net/Ly0429yr/2/
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'm applying a box shadow to a form and thus all of it's inputs. For the submit button I have it as a specific class to which I'm trying too apply box-shadow: none, but it doesn't seem to be taking. Any idea why?
css:
body {
background: #b3b3b3;
font: 16px helvetica, arial, sans-serif;
}
.clear_both {
clear: both;
}
/* Heading */
#HeaderContainer {
background: #272727;
height: 120px;
box-shadow: 5px 5px 5px #7f7f7f;
}
#NavigationContainer {
position: relative;
float: right;
top: 90px;
margin: -5px 30px 0px 0px;
}
#NavigationContainer .current_page a {
color: #2e7de8;
text-shadow: 0px 0px 10px #2e7de8;
}
#NavigationContainer a:hover {
text-shadow: 0px 0px 15px #2e7de8;
}
#NavigationContainer li {
display: inline;
margin-left: 40px;
padding: 5px;
}
#NavigationContainer a {
text-decoration: none;
color: #FFF;
font: bold 20px helvetica, arial, sans-serif;
}
/* Content */
#MainContent {
width: 960px;
margin: 20px auto 40px auto;
}
#ContentRightColumn {
float: right;
width: 240px;
background: #272727;
padding: 20px 20px 40px 20px;
margin-top: 20px;
color: #fff;
border-radius: 15px;
box-shadow: 5px 5px 5px #7f7f7f;
}
#ContentRightColumn h1 {
font-size: 24px;
font-weight: bold;
}
#ContentRightColumn h3 {
font-size: 14px;
font-weight: bold;
}
#ContentRightColumn p {
font-size: 16px;
}
.news_item {
margin-top: 15px;
}
#ContentLeftColumn {
width: 640px;
padding: 20px;
}
#ContentLeftColumn h1 {
background: #272727;
color: #FFF;
max-width: 500px;
font-size: 24px;
font-weight: bold;
padding: 5px 10px;
border-radius: 15px;
box-shadow: 5px 5px 5px #7f7f7f;
position: relative;
right: 40px;
}
#ContentLeftColumn p {
text-indent: 1em;
}
.content_item {
margin-top: 20px;
}
.content_item p {
margin-top: 20px;
}
.content_item h2 {
font-weight: bold;
font-size: 24px;
color: #004dd4;
text-shadow: 3px 3px 4px #7f7f7f;
right: 20px;
}
/* Footer */
#FooterContainer {
background: #272727;
color: #fff;
}
#FooterContainer li {
display: inline;
}
#FooterContainer input, #FooterContainer textarea {
display: block;
width: 100%;
}
#ContactNavigationContainer {
float: right;
}
#FooterRightColumn {
width: 40%;
float: right;
margin: 20px 150px 20px 50px;
}
#FooterRightColumn form {
margin-top: 20px;
padding: 15px 20px;
}
#FooterRightColumn input, #FooterRightColumn textarea {
margin: 5px;
box-shadow: inset 5px 5px 8px black;
border: none;
font-size: 16px;
background: #b3b3b3;
padding: 5px 10px;
}
#FooterRightColumn textarea {
height: 160px;
}
#FooterRightColumn .current_contact_option {
margin-right: 20px;
padding-right: 20px;
border-right: 1px solid #FFF;
color: #2e7de8;
font-weight: bold;
text-shadow: 0px 0px 5px #2e7de8;
}
#FooterLeftColumn {
width: 40%;
padding: 40px 50px;
margin-left: 100px;
margin-top: 20px;
}
#FooterLeftColumn h1 {
font-weight: bold;
font-size: 24px;
position: relative;
right: 20px;
}
#FooterLeftColumn p {
padding: 20px 0px;
text-indent: 1em;
}
.submit_button {
position: relative;
width: 80px;
float: right;
}
html:
<html>
<head>
<title>B.workshop Home</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
<body>
<div id="HeaderContainer">
<img src="../images/logo.png"></img>
<div id="NavigationContainer">
<ul id="NavigationMenu">
<li class="current_page">Home</li>
<li>Technologies</li>
<li>Projects</li>
</ul>
</div> <!-- Close NavigationContainer -->
</div> <!-- Close HeaderContainer -->
<div id="MainContent">
<div id="ContentRightColumn">
<h1>News</h1>
<div class="news_item">
<h3>Mon. October 28th</h3>
<p>I need to build a portfolio, you need a website or application. Until I I get a few jobs under the belt I'm offering to work at the equivalent of a paid interns wage. Take advantage of this while you can!</p>
</div>
<div class="news_item">
<h3>Mon. October 26th</h3>
<p>The website is now live!</p>
</div>
</div> <!-- Close RightColumn -->
<div id="ContentLeftColumn">
<h1>Welcome to Brett's Workshop...</h1>
<div class="content_item">
<h2>So who are you?</h1>
<p>Hi, my name is Brett Sprouse and you've found my homepage! I'm a freelance web developer and programmer. Take a look around and if you think you may have a project I can help you with then head over to the contact page and share it with me.</p>
</div>
<div class="content_item">
<h2>Ok, and what can you do for me?</h2>
<p>Well, I can make you a webpage of course. Not just that, but setup hosting, provide server maintenance, website support, both per job or on a contractual basis. I can likely also take over support for existing websites in addition to the one I may make from scratch.</p>
<p>Everything is coded to the current html specifications including html5 and css3 (when applicable, many browsers still do not support the current html5/css3 specifications). I said I'm a programmer as well so this means I can work my way around javascript for front end/client side interactivity as well as server side scripting preferentially with python though I can also use php if it's for some reason forced upon me.</p>
</div>
<div class="content_item">
<h2>Is that it?</h2>
<p>What do you mean is that it!? Ok, ok, I can also develop desktop applications, tools and utilities, or scripts to help automate otherwise monotonous tasks; pretty much anything within a programmers domain. I know quite a few languages, libraries, frameworks, and can learn new ones rather quickly. Both windows and linux so if there's a task you believe can be solved with programming I can likely make that happen for you. Do keep in mind however that I am only one guy so there is a limit to the size of projects in which I can handle, but if you're not sure it doesn't hurt to ask. </p>
</div>
</div> <!-- Close LeftColumn -->
</div> <!-- Close MainConent -->
<div id="FooterContainer">
<div id="FooterRightColumn">
<div id="ContactNavigationContainer">
<ul id="ContactNavigation">
<li class="current_contact_option">Message Form</li>
<li>Live Chat</li>
</ul>
</div> <!-- Close ContactNavigationContainer -->
<form>
<input type="text" value="Name" name="name"></input>
<input type="text" value="Email" name="email"></input>
<textarea type="text" value= "Message" name="message"></textarea>
<div class="submit_button"><input type="submit" value="submit"></input></div>
</form>
</div> <!-- Close FooterRightColumn -->
<div id="FooterLeftColumn">
<h1>Contact</h1>
<p>So you've looked me over and decided to give me a shot. Well you won't be let down. Just use the form on your right to send me a shot description and anything else you feel is necessary and I'll get back to you shortly with a proposal. If you've happened to catch me when I'm on the computer and would like to talk directly feel free to use the new live chat system!</p>
</div> <!-- Close FooterLeftColumn -->
<div class="clear_both"></div>
</div> <!-- Close FooterContainer -->
</body>
</html>
This is just an issue regarding specificity - you just need to be more specific than the initial declaration.
No need for !important, just use the following:
#FooterRightColumn .submit_button input {
box-shadow: none;
}
jsFiddle example - it works.
Initially, you were added the shadow via #FooterRightColumn input. Simply be more specific by targeting #FooterRightColumn .submit_button input instead.
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.
The site i'm working on is http://cargocollective.com/amytdatta
I am trying to position the Running on Cargo link at the right side of the top nav bar.
In the theme i'm using there used to be a search box positioned exactly there, so I hid the search and tried copying the search CSS to the Cargo link CSS. Here it is:
.cargo_link {
float: right;
margin: 0 0 0 20px;
color: #cccccc;
padding: 0 0 0 25px;
width: 160px;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 50px;
text-align: right;
border-left: 1px solid #cccccc;
}
Some fiddling with z-index values has made the Cargo link visible again.
I'm still unable to place it where I want, though. Here is the CSS for the Search Box (which i've made visible for now):
#search_form {
display: inline-block;
float: right;
margin: 0 0 0 20px;
padding: 0;
}
#search_form #search_term {
background: #f5f5f5;
border-left: 1px solid #cccccc;
border-top: 0;
border-bottom: 0;
border-right: 0;
color: #999999;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
height: 50px;
line-height: 12px;
padding: 0 0 0 25px;
width: 160px;
}
I basically wish the Cargo Link to precisely replace the Search box.
Any advice would be greatly appreciated!
Cheers.
Your #nav_wrapper element has a background: whiteSmoke; property which hides whatever's under it.
You either put the cargo link in the wrong element (i.e. not inside #nav_wrapper but under it). or you should not have a background on #nav_wrapper
Edit:
I'm guessing you should move your <div class="cargo_link"> to right after <div class="page_nav">'s closing tag
You have <div id="nav_wrapper"> with position:fixed and z-index:999, that's making the cargo_link appear behind the nav_wrapper...