I am new to HTML/CSS and have been working on a website by editing an existing template with HTML 5 responsive features. My workflow consisted of checking back and forth between the code and the Chrome browser.
After I finished the website and was happy with the results, I checked to see how everything was displaying in Firefox and Safari.
To my shock, I suddenly saw that in Firefox the images on a couple of pages were sent completely out of alignment to the far right of the browser (so much so, that I would have to use the horizontal scroller to see the images fully). Throughout the whole development process I had no such problems with Chrome.
However, subsequently I have seen that there are also more slight image display errors for the website in Chrome and Safari on the iPad.
So far I have looked through the questions on this site and also run the w3 online html and css validators. None of these things have worked.
Below I have provided the html of one of the affected images and the relevant css below that.
<figure>
<img src="img/image.jpg" alt="Some text">
<figcaption>Some Text
</br>
(Photo credit: Daniel Easterman)
</figcaption>
</figure>
#main_article img
{
display: block;
border: 0;
max-width: 100%;
height: auto;
padding: 20px 0;
border-bottom: 1px solid #D6D0C1;
}
#main_article figcaption
{
line-height: 25px;
font-size:14px;
max-width:900px;
width:auto;
}
I hope someone can help me figure out why there is this discrepancy between chrome and firefox and what I can do to solve the problem so the images display nicely on both browsers. Thanks very much in advance!
I've looked at your code and can't find anything wrong. Even tested it on jsFiddle.
The problem you're having must have something to do with whatever styling you have for [body] or [container], etc.
basically, you might want to provide the bigger picture so we can help. Maybe share with us the entire style sheet, or whatever is relevant, perhaps the #main_article?
Another thing, is maybe firefox is not happy with custom elements and perhaps you should change figure and figcaption into classes instead (just a guess)
The full main article section is below. Also attached is a screenshot showing the problem in firefox.
#main_article
{
position:relative;
width:auto;
max-width:900px;
margin: 0 auto 20px auto;
}
#main_article h3
{
margin:35px 0 0 0;
font-size:25px;
border-bottom: 1px solid #D6D0C1;
padding: 20px 0;
margin-bottom: 20px;
width:auto;
float:left;
max-width:900px;
}
#main_article h4
{
line-height:25px;
width:auto;
float:left;
font-weight:900;
max-width:900px;
}
#main_article p
{
line-height:25px;
width:auto;
float:left;
font-weight:normal;
padding: 5px 0;
}
#main_article p a
{
text-decoration:none;
color:#00bfff;
}
#main_article p a:hover
{ text-decoration:underline;}
Related
I found a very weird bug today while developing a new site, I really don't know why in the hell it's happening, but I think someone might know.
I made a navigation menu fixed to the top-right part of the page, within it, a big div made round from a lot of border-radius.
It was working very fine and normal untill I added to the right bar a facebook page plugin.
When the bottom of that div goes over the title of the page in the plugin, the border-radius disappears. It stays a square div while it's there, goes back to round if I scroll the page and stays round until it's "touching" that very specific part of that page plugin.
I really don't have a clue about why, here's some code for better understanding:
.nav {
position:fixed;
width:100%;
text-align:right;
z-index:9999;
}
.face {
position:absolute;
width: 20%;
background:#F93;
top:5px;
right:10px;
border-radius:9999px;
overflow:hidden;
}
.face:before {
content: "";
display: block;
padding-top: 95%;
}
.face a img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%
}
.menu{
display:inline-block;
background:#FFF;
padding:1em;
width:50%;
text-align:left;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
margin-top:3%;
}
.menu a {
padding:0 0.5em;
border-radius:4em;
}
And also:
<div class="nav">
<div class="menu">
menumenumenumenu
</div><br/>
<div class="name">
<h2>name</h2>
</div>
<div class="face">
<img src="i/image.png"/>
</div>
</div>
By the way, it seems to happen only on webkit browsers, on firefox it looks very normal, didn't even test in internet explorer.
EDIT: Just tested on Internet Explorer and SURPRISINGLY it did work very well, this is now very very weird
EDIT2: Some Screenshots for even more clarification:
Before touching the title:
After it gets on that very specific spot:
Further down:
Anytime it's over the title it's not round, elsewhere it's fine.
EDIT3: I found out that there was another place the bug was happening; I have a jquery slider on the page; I had an Opacity effect on hover on some controls, when these opacity was being animated, it reproduced the disappearing border-radius problem, and then went back to normal by itself; Removing opacity CSS rule from the neutral state made the bug stop happening while hovering the slider, but it keeps hapenning while that div is over the facebook plugin
There may be more going on here because of the Facebook plugin, but it sounds like this is a problem of not taking into account Webkit CSS rules. If that's the problem, I'm surprised that Firefox isn't giving you trouble. The standard way to style rounded corners with cross-browser support is to give border-radius, then -moz-border-radius and -webkit-border-radius:
.menu {
...
border-radius: 100px 0px 0px 100px;
-moz-border-radius: 100px 0px 0px 100px;
-webkit-border-radius: 100px 0px 0px 100px;
...
}
.menu a {
...
border-radius: 4em;
-moz-border-radius: 4em;
-webkit-border-radius: 4em;
}
Ok, I found a fix for the problem, that I can only think I didn't thought before because I was too tired. ^^'
First of all, I found out that this bug was even weirder than I thought, thinking back how the opacity on another element seemed to affect it, I tried changing the image opacity, then, I found out that the div that contained it was in fact, still round.
Even though the image was being cut by the overflow:hidden; it wasn't being cut by the border-radius of the parent div.
I fixed it by putting border-radius on the image too, so now it is round even when over that plugin, the problem is gone now.
I hope someday this gets found by some webkit developers and the identify and fix that bug, it was really weird.
Thanks Henry for the help too!
TL;DR
Fixed by using border-radius on both parent div and image.
I have an HTML / CSS project on JS Fiddle with several issues jsfiddle ZyBZT.
The <DIV class"footer"> is not showing up at the bottom.
The background image does not display: url('http://i.imgur.com/z5vCh.png')
The Sprite Images are not showing up in the <UL> list.
Originally, the Sprites were working, and nothing I had added has changed any of the Sprite CSS code, which is as follows:
#nav {
list-style-type:none; /* removes the bullet from the list */
margin:20 auto;
text-shadow:4px 4px 8px #696969; /* creates a drop shadow on text in non-IE browsers */
white-space:nowrap; /* ensures text stays on one line */
width:600px; /* Allows links to take up proper height */
}
#nav li {
display: inline-block;
text-align: center;
width: 192px;
}
#nav a {
background: url('http://i.imgur.com/Sp7jc.gif') 0 -100px no-repeat;
display: block;
height: 50px; /* This allowed the buttons to be full height */
color: Blue;
}
#nav a:hover {
background-position: 0 -50px;
color:Red;
}
#nav .active, a:hover {
background-position: 0 0;
color: Black;
}
#nav .active:hover {
background-position: 0 0;
color: Black;
}
#nav span {
position:relative;
text-align: center;
vertical-align: middle; /* This doesn't seem to work (???) */
}
Sometimes, the background image works, but other times it does not.
Lately, I have been trying to get this FOOTER div to work, and now it appears that much more of it is messed up.
How am I supposed to be able to tell when one piece of CSS breaks another piece of CSS? How do I tell when something tries to execute the CSS and there is an error?
The best you can to is to
Use Firebug or the browser developer tools of your choice to see what classes/styles the browser is applying, and the effects, and
Study the HTML standards to make sure you're coding them correctly; keep in mind that they are often counter-intuitive. MDN has some excellent articles on HTML layout, vertical alignment and many other HTML/CSS/Javascript topics.
Fixed the footer problem easy enough:
div.footer {
bottom:0px;
position:fixed;
text-align:center;
}
However, this does NOT answer the main question: How to Troubleshoot!
Best tool I've found for this is Firebug, it's still better than Chrome's tools. When you inspect an element it will show you the hierarchy of applied styles and those styles that have been overridden. (with strikethrough)
This is your best tool to see what is happening.
I think you're having z-index issues and the text-shadow is causing issues.
Removed the z-index:-1 and the text-shadow and the background behaves.
I'm having this weird problem with this website I just started building. I want to get the header to align completely flush with the top of the page. But for some reason, there's a small space, about 20px high, that won't go away no matter what I try. I'm assuming there's just something about CSS and html that I'm not getting so can you guys help me out?
CSS:
#header {
background-color:#3429C9;
/*-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;*/
display:block;
position:relative;
z-index:2;
margin-top:-20px;
border-bottom:2px solid white;
margin-bottom:20px;
height:60px;
}
body {
text-align:center;
font-family: Georgia, Serif;
background: #000000;
margin:0;
height:100px;
display:block;
border:2px solid red;
}
Every browser (firefox,chrome,IE) have a default CSS it comes with which give default styling to elements. It also gives some default margin/padding, so usually when starting a web site design you should use a css reset file to reset all default styling.
That way you get the same basic behaviour for all browsers.
For a quick solution to yuor problem, just set the header padding/margin to 0.
I don't know why this is happening.
I have this code here.
It works fine but "sometimes" (and many times in a row) for no apparent reason, this happens:
To all the .box class.
Sorry I have to share "all" my code but I have no idea why this is.
This is what it should look like:
I don't know if this is usual but id you want, you can download the two files from here (HTML and CSS + Images) because in jsfiddle seems to work all of the times,
I don't know whether it matters or not but I'm using chrome (latest) on a mac.
EDIT: I seems to work fine in safari every time.
Thanks in advance!! Please ask for any clarification needed!
By the way my title is absolutely horrible, sorry! but I have no idea what the problem is so I can't really describe it, feel free to edit or comment any suggestion.
On your style.css
Remove overflow:hidden on #container
Set overflow:hidden to the .box
Set float:left to the .box img
Set float:right to the .follow
new
#container {
height:100%;
width:520px;
position:relative;
left:50%;
margin:20px 0 0 -250px;
}
.box {
border:1px solid gray;
height:200px;
width:500px;
float:left;
margin:0px 0 20px 10px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
overflow:hidden;
}
.box img {
width:140px;
height:140px;
margin: 15px 0 0 15px;
float:left;
}
.follow {
/*outline:1px solid red;*/
height:80px;
width:260px;
float:right;
margin:25px 30px 0 0;
}
To make your css cleaner, when you state styles for .box:hover, you don't need to redeclare things that already apply to .box. All .box styles are inherited by .box:hover . (Example, how you have float:left on both).
That being said, this is almost certainly a float issue. Adjust both the float and clear properties of the two inner divs, the outer div, and the img to see if you learn anything from that. It's difficult to give help when the problem doesn't occur in the fiddle.
I am working on a website and on the top navigation bar there is a search box, I applied the following css on the search submit button
#submit {
background: url("img/new-search-icon.png") no-repeat scroll -1px 0 #FFFFFF;
border:0 none;
cursor:pointer;
display:block;
height:21px;
padding:0;
position:absolute;
right:0;
text-indent:-9999px;
top:0;
width:20px;
z-index:2;
}
My Problem is in IE7 the text indent is not working please help me
if you want to see the demo you can view it by clicking here Click here. Please help me.
Add this CSS to make IE7 behave:
text-transform: capitalize;
Crazy but true.
while implementing the image replacement technique like above, there are some rules to go with css to get it work on IE browsers.
css declaration:
text-indent:-9999px;
text-transform:capitalize;
font-size:0;
display:block;
line-height:0;
font-size:0 is used to reduce the font size and works well in IE7. But even after adding this line, you would notice a black line(which is basically the text) on the center of the button in IE6.
display:block Negative text-indent works in IE only if this is added.
line-height:0 Another fix for IE6.
text-transform:capitalize I don't know the exact reason of including the property, somehow it fixes the issue.
Hope this helps.
.submit {
line-height: 0px;
font-size: 0px;
/* restante do teu código */
}
este é um exemplo simse
If nothing else works exactly right, this does:
color: transparent;
text-indent: 0 !important; /* reset the old negative value */
So normal browsers use the negative text-indent, ie7 gets special treatment using conditional comments
Has a similar problem in IE8.
After eliminating all other possibilities, a line-height declaration elsewhere in the CSS was breaking the text-indent. solution: set the line-height explicitly to 0.
Only following will do the job for you :)
text-indent:-9999px !important;
line-height:0;
text-transform: capitalize; actually had no effect for me (it was happening on a tags), but this worked
text-indent: -9999px
float: left
display: block
font-size: 0
line-height: 0
overflow: hidden
I don´t know if it´s the cause of your problem, but I think your background shorthand notation is wrong; the colour code should be at the start, not the end.
Sorry a little late to the post, but was looking for a solution to the IE7 issue with negative text-indent. I started trying my own random ways and stumbled upon this. jUst wanted to post it out on Stack in case it may help others.
Trying to add an icon to a link and not show the text.
My CSS for all browsers
a.lnk_locked , a.lnk_notchecked, a.lnk_checked
{ background: url(../images/icons/icon_sprites.png) no-repeat; padding: 0 2px 0 0; width:18px; height:18px;
vertical-align:middle; text-indent:-9009px; display:inline-block; overflow: hidden; zoom: 1; *display:inline;}
a.lnk_locked { background-position: -1px -217px; }
My CSS just for IE7
a.lnk_locked , a.lnk_notchecked, a.lnk_checked
{ text-indent:20px; padding-left:-20px; width:18px;}
I just wanted to add for "others" (even though it not strictly related to the topic and not the ops problem).
Please ensure you use a "px" for your value. i.e. -9999px not -9999.
I've just spent 10 mins trying to debug why this didn't work. Staring at the value right in front of me.
I've been doing alot of Silverlight lately and so my mind didn't flip over to CSS markup requirements fast enough. Grrr.
You must include a unit of measurement.... or else it will just silently fail.
The solution that I found to my text-indent woes in IE7, and something that I feel should be added to this thread is the following:
Doesn't work:
text-indent: -900009px;
Does work:
text-indent: -9999px;
I didn't know there was a limit? I guess there is.
Don't use text-indent. Try this one instead:
display: block;
height: 0;
padding-top: 20px; //The height of your button
overflow: hidden;
background: url(image.png) no-repeat; // Image replacement
Works in all browsers including IE6.
I tried all of the above with no success. I had to add a float:left before it picked up the text indent. IE7 is crazy, and by crazy I mean awful.
Here is some CSS I'm using that works for me in IE and doesn't rely on text-indent
.sprite {
width:100%;
height:0px;
padding-top:38px;
overflow:hidden;
background-repeat:no-repeat;
position:relative;
float:left;
display:block;
font-size:0px;
line-height:0px;
}
.sprite.twitter {
background-image:url(/images/social/twitter-sprite.png);
margin-top:8px;
background-position: 4px 0px;
}
#social-links a:hover .sprite.twitter {
background-position: 4px -38px;
}