The page for Chrome and FF are very different, it seems like border in Chrome is inside the li, so the height is 130px, but in FF, the border is outside, so the height is 150px.
I have added more info for the code.
<div class="service_promos cf">
<ul>
<li>
<h2><a>item1</a></h2>
</li>
<li>
<h2><a>item2</a></h2>
</li>
</ul>
</div>
Here are css:
.service_promos {
margin-top: 0;
}
.service_promos ul {
width: auto;
margin: 0;
padding: 0;
list-style: none;
list-style-image: none !important;
}
.service_promos li {
background: none;
border-bottom: 10px solid #e2e1d6;
border-left: 10px solid #e2e1d6;
border-right: 10px solid #e2e1d6;
min-height: 130px;
margin-top: 0 !important;
padding-right: 1em;
list-style-type: none;
padding: 1em 2em;
display:block;
}
.service_promos h2 {
float: left;
margin-left: 5%;
margin-top: 0;
width: 70%;
color: #FF6526;
font-size: 2.5em;
font-style: normal;
font-weight: 700;
line-height: 1em
}
.service_promos h2 a {
color: #FF6526;
text-decoration: none;
}
The items that you provided appear to look just fine.
If you still aren't satisfied with their appearance, you may want to consider using either a Normalize.css or Reset.css reference within your Project / Page.
The purpose of these style-sheets is to help "normalize" all of the elements that are commonly used so that they appear similarly across different browsers and environments.
(I would recommend checking if you have any other add-ins or extensions that could possibly be interfering with the appearance of any of your elements)
Related
I have a little problem, there is a little problem on my menu, there is a little space between the ul border and the li background, here's my code:
Menu code:
.menu_base {
margin-left: auto;
margin-right: auto;
margin-top: 0;
list-style-type: none;
padding: 0;
overflow: hidden;
width: 75%;
border: 3px solid;
border-top: 0px solid;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-color: #ff6eff;
}
.button {
float: left;
}
.button a {
padding: 15px 15px;
display: block;
text-align: center;
text-decoration: none;
color: #ff6eff;
font-family: sans-serif;
}
.button a:hover {
background-color: #ff6eff;
color: white;
}
<ul class="menu_base">
<li class="button">Accueil</li>
<li class="button" style="float: right">Inscription</li>
<li class="button" style="float: right">Connexion</li>
</ul>
Excepted result: (From Firefox)
https://i.stack.imgur.com/e62BM.png
Actual result: (From Chrome)
https://i.stack.imgur.com/x3wYU.png
Did you add the normalize CSS to the top op your CSS file?
All browsers sort of add their own style which can cause problems when adding CSS to your site. By normalizing the CSS you get the same margin, padding etc for all browsers. You can use Eric Meyers normalize CSS. Just copy the CSS from the link below and add it to the top of your CSS file.
You can find it here: https://meyerweb.com/eric/tools/css/reset/
A link on a "navbar" on my website can't be clicked for some reason and I can't seem to find the reason why. It is in the viewport(Here is the link to the website:https://codetheworld.000webhostapp.com/. The link on the website is supposed to be the "Learn to code" button). One interesting thing is that, once I open an inspect element window, it works. Here is the code snippet for just the navbar:
#first {
margin-top: 500px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
top: -1150px;
left: 100px;
z-index: 4;
}
li a {
width: 200px;
height: 50px;
font-size: 2em;
text-decoration: none;
color: white;
font-family: Georgia, serif;
padding: 10px;
border: 2px solid white;
border-radius: 7px;
text-align: center;
line-height: 30px;
}
li a:hover {
background-color: grey;
color: white;
text-decoration: none;
}
<ul id="first">
<li>Learn to code</li>
</ul>
You positioned your element outside of the viewport, so it can't be clicked.
Remove the margin-top & top positioning and everything will work:
#first {
background: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
left: 100px;
z-index: 4;
}
li a {
width: 200px;
height: 50px;
font-size: 2em;
text-decoration: none;
color: white;
font-family: Georgia, serif;
padding: 10px;
border: 2px solid white;
border-radius: 7px;
text-align: center;
line-height: 30px;
}
li a:hover {
background-color: grey;
color: white;
text-decoration: none;
}
<ul id="first">
<li>Learn to code</li>
</ul>
Well, you have a <div id="up2"> and it's right over your button. That's the reason why you can't click that button.
You could increase the top value of your div#up2 and edit/decrease the top values of the elements in the div#up2.
#Alessi 42 commented the correct solution, however Dekel was the one who posted it.
I did a fiddle and verified certainty: https: // jsfiddle.net / drpeck / tgeyfpd8 /
So learning from the experience I would say:
First test with and without CSS, and once you have determined that without CSS the element appears.
Start introducing CSS selectors and add/removing the different attributes
Once you find the attribute that is affected proceed to play with the values.
For my own sake, although not required, having the absolute path always helps me personally to avoid any unexpected misunderstanding (in other words to have clarity), even if the file is under the root directory. i.e:
Insted of this: href="tutorial.html" I would do href="./tutorial.html"
In IE11 the font-size of my navigation bar is much much smaller than in other browsers.
In my CSS file, I set body { font-size:16px; } which I would like to make a default font-size for the document.
For all other elements I use em units.
I set font-size:1.5em for <a> in my navbar, which should be 24px, but IE11 ignores that and the font-size is only 16px. Same thing happens to some other text on the website (h1, h2, span).
When I inspect the element I see that IE11 shows 1.5em size as the one that is assign to it, but the result of calculation is only 16px.
Other browsers (including Edge) displays the website properly.
* {
border: none;
margin: 0;
padding: 0;
text-decoration: none;
line-height: normal;
list-style-position: inside;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
color: #666;
font-family: 'Roboto', Arial, Tahoma, sans-serif;
font-size: 16px;
font-weight: normal;
padding: 0;
margin: 0 auto;
background-color: #fff;
}
nav#top {
float: right;
display: inline-block;
}
nav#top ul {
list-style: none;
display: inline;
}
nav#top ul li {
list-style: none;
display: inline;
float: left;
}
nav#top ul li a {
display: block;
float: left;
padding: 30px 10px;
font-size: 1.5em;
font-family: 'Lato', sans-serif;
font-family: 'Arimo', sans-serif;
color: #fff;
text-shadow: 1px 1px 1px #060;
}
<nav id="top">
<ul class="clearfix">
<li>Label 1
</li>
<li>Label 1
</li>
<li>Label 1
</li>
<li>Label 1
</li>
<li>Label 1
</li>
</ul>
</nav>
I googled about font-size:100% !important and similar solution, but didn't find anything that works.
Please try this:
nav#top ul li a {
color: #fff;
display: block;
float: left;
font-family: "Arimo",sans-serif;
font-size: 24px;
padding: 30px 10px;
text-shadow: 1px 1px 1px #060;
}
This will not comply with every use case, but it's the way that has reduced my headaches dramatically.
To achieve an overall good cross browser experience, I would suggest that you in general remove font-sizes from the body tag and let the browsers do their magic.
Although - at first glance - it seems that you might loose control over the design, I have learned that you get more consistent results if you remove most of the font-size properties.
I programmed a website with a fixed menu on the top, but in the Internet Explorer 11 it moves around for half a second or something like that when I click a button in the menu. In other browsers it works fine. What can I change to remove the bug, I think it has to do with my CSS code.
It would be very nice if someone could help me.
I want the buttons to be the same in IE and Mozilla, Chrome. I think that the IE is always a bit different to the other browsers.
Here is my CSS code for the Navigation menu:
/* CSS Menu Navigation Bar */
#cssmenu
{
position: relative;
margin: 0 auto;
clear: both;
}
#cssmenu a
{
list-style: none;
margin: 0;
padding: 0;
border: 0;
line-height: 1.5;
}
#cssmenu li
{
border: 1px solid transparent;
padding-top: 7px;
display: block;
float: right;
margin: 0 10px;
}
#cssmenu ul
{
margin: 0 auto;
padding: 0;
text-align: center;
padding-right: 20px;
margin-bottom: -70px;
max-height: 80px;
}
#cssmenu li a
{
padding-top: 10px;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 10px;
width: 70px;
border: 1px solid #dfdfdf;
text-decoration: none;
display: block;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
font-size: 17px;
font-family: Verdana, Tahoma;
color: #292F33;
}
#cssmenu li:hover a
{
border-bottom: 3px solid #30B0FF;
display: block;
color: #30B0FF;
clear: both;
font-size: 17px;
font-family: Verdana, Tahoma;
transition-duration: 0.05s;
transition-delay: 0.03s;
}
/* screen smaller than 1325px */
#media only screen and (max-width : 1325px),
only screen and (max-device-width : 1325px)
{
#menu
{
min-width: 1020px;
}
#cssmenu li a
{
padding-top: 10px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 10px;
width: 60px;
font-size: 15px;
border: 1px solid transparent;
}
#cssmenu li:hover a
{
font-size: 15px;
}
}
And here is the important HTML code:
<!-- Menu -->
<div id="menu">
<li style="list-style: none;"> <img id="image" src="images/head.png"/><br><i> {by Ivan Ilic}</i></li>
<div id='cssmenu'>
<ul>
<li><a href='lazarus.html'>Lazarus</a></li>
<li><a href='scratch.html'>Scratch</a></li>
<li><a href='html.html'>HTML</a></li>
<li><a href='c-sharp.html'>C#</a></li>
<li><a href='c++.html'>C++</a></li>
<li><a href='index.html'>Home</a></li>
</ul>
</div>
</div>
The "flash" you're seeing is the default active background color. When you click, it flashes gray, which gives the appearance of movement. You need to have a CSS Style Reset to override the default background color in IE. Alternatively, you can simply change the active style itself.
Example:
:active { background:transparent; }
The style reset will prevent most cross-browser styling differences by overriding all the different default styles that browsers tack on. I tested this with F12 Developer Tools and it eliminated the flash.
Edit:
The use of document.write() to add the style sheet is slowing down in IE. Essentially the content is being painted, and then "fixed" once the styles are loaded. Link the style sheet without JS and the flash will disappear.
The nav bar displays the correct way (horisontally) in IE 8 and above and every other browser. However only IE 5.5, 6 and 7 it displays diagonally. Can any body help?
.top-nav ul {
margin: 0;
list-style: none;
line-height: normal;
}
.top-nav li {
margin-left: 220px;
}
.top-nav a {
display: block;
float: left;
height: 38px;
margin-right: 1px;
padding: 4px 30px 0 30px;
text-decoration: none;
font-size: 34px;
font-weight: bold;
font-family: 'Exo', sans-serif;
color: #FFF;
}
.top-nav a:hover {
background: #272727;
color: #18942f;
}
.top-nav .current_page_item a {
background: #252525;
color: #FFF;
}
HTML
<div class="top-nav">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Skills</li>
<li class="current_page_item"> Contact</li>
</ul>
</div>
Instead of floating each link, why not use display:inline on your li, display: inline works on IE 5.5
Also you need to remove "display: Block" as this is what is causing the links to move down.
.top-nav ul {
margin: 0;
list-style: none;
line-height: normal;
}
.top-nav li {
display: inline;
}
.top-nav a {
height: 38px;
margin-right: 1px;
padding: 4px 30px 0 30px;
text-decoration: none;
font-size: 34px;
font-weight: bold;
font-family: 'Exo', sans-serif;
color: #aaa;
}
http://jsfiddle.net/YJjya/
If you need to have your items be blocks, then use inline-block. Workaround to make it work on older version or IE can be found here: Work Around Inline Block
Also here is a handy piece of code to place immediately after your first head tag. It will only display is the user is using IE 7 or later and will tell them get their sh*t together and download a new browser. It is really not worth the time trying to make your site work on every IE version as you'll end up pulling your hair out to please a few people who obviously aren't internet savvy to begin with. As Mario said only 6% of the world still use IE6... But if you take a closer look at countries such as the US or UK that number is below 1%
After Head
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
CSS
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
I've seen this problem many times. You want to float the LI and not the A that's inside the LI.
All you need to do is remove [float:left] from [.top-nav a] class and add it to the [.top-nav li] class. Your CSS would be:
.top-nav ul {
margin: 0;
list-style: none;
line-height: normal;
}
.top-nav li {
margin-left: 220px;
float: left;
}
.top-nav a {
display: block;
height: 38px;
margin-right: 1px;
padding: 4px 30px 0 30px;
text-decoration: none;
font-size: 34px;
font-weight: bold;
font-family: 'Exo', sans-serif;
color: #FFF;
}
.top-nav a:hover {
background: #272727;
color: #18942f;
}
.top-nav .current_page_item a {
background: #252525;
color: #FFF;
}