For the life of me, I cannot figure out why the code at www.moosecodes.com works on Safari and Chrome but when I open it with Firefox the browser doesn't recognize any of the line breaks!
i.e. <br/>
I have a suspicion that it is because I haven't declared a doctype, but its just a regular old run line break that isn't being interpreted. Anyone know the answer?
EDIT: To see what I mean, go to the site and click on "resume" then click on "Experience" or "Research"
(source: moosecodes.com)
You have everything on your page set to position: absolute with the following CSS.
* {
color: #C8C8EB;
height: 100%;
margin: 0;
padding: 0;
position: absolute;
text-decoration: none;
width: 100%;
}
That's a very bad universal style to have, only apply position: absolute to what you need it applied to and it'll fix your <br /> problem (and probably others too!). or you could target the <br /> directly to set it back to default.
br {
position: static;
}
Related
Take this code and open it in Firefox and in Chrome:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
background: #EEE;
width: 100%;
height: 300px;
;
}
img {
display: block;
max-width: 100%;
height: auto;
max-height: 300px;
}
<div class="container">
<img src="http://curiosidades.batanga.com/sites/curiosidades.batanga.com/files/Los-gatos-nos-ignoran-1.jpg" alt="" />
</div>
You have to reescale the width of the container by (for example) reescaling the frame or the browser window (this may help: http://codepen.io/vandervals/pen/NqvYQZ)
You'll see the difference inmediatly: Chrome uses the max-height and the max-width at the same time for limiting the scale of the picture, while firefox, only uses the max-height.
Does anyone know how to make firefox behave like chrome? Which of the behaviours is the correct one, according to the spec?
Use firefox specific CSS, witht he code -moz
Another solution would be to use hacks
Browser Hack
Hope this helps :)
I've ran this with and without the "!important" CSS declaration and saw a minor improvement for Firefox (and I mean very minor); I did make sure I cleared my history before each run but there could be a few reasons for that. They use different engines so they're going to decide how they should load things differently and when (http://www.quora.com/What-makes-one-web-browser-faster-than-another - an old article but gets the point across).
The link Arjun for Browser Hacks is a good one to help optimize your CSS specific to the browser.
I have a three year old website, which has been perfectly functioning, until now. The new version of the Google Chrome browser, v.41, experiences a strange bug: I have an IMG tag inside of an A tag, and when I click on it, the image randomly changes position instead of going to the where the link is linked. This only occurs with the latest Chrome, v.41. Older versions of Google Chrome and other browsers do not experience this problem. I have tried this on both Windows 7 and OSX 10.10
I copied the code to jsfiddle in case you want to look at it. I have not used any outdated CSS functions and there is no JavaScript used at all.
The linked image's code:
<a class="insImg" href="#">
<img class="imapa-foto" src="http://www.dolejsialej.cz/photo/thumbs/RD2-mars.jpg" />
Dům 1
</a>
I would just like to know whether there is something wrong, or if it is just this version of Google Chrome.
As you've mentioned it looks to be a bug with Chrome.
I've played with the code a bit and this part seems to have been part of the issue:
ul li img {
width: 150px;
position: absolute;
top: 0;
left: 0;
}
I don't understand why clicking on the anchor causes this positioning to be dropped, but as a quick workaround you can just move the positioning into the anchor like so:
ul li a {
text-decoration: none;
-moz-opacity: 1;
opacity: 1;
color: #fff;
position: absolute;
top: 0;
left: 0;
}
ul li img {
width: 150px;
}
See the updated fiddle below.
https://jsfiddle.net/2d4b1mLm/5/
I'm working on a drag and drop field for files and so far I have been able to style it however I wish. Except I need to somehow add text that says 'drag and drop' inside the area. I'm not really sure how to accomplish this.
I have tried adding content:'drag and drop';
And I have tried a background image, but it was not scalable and not something that I believe is the right solution.
my html looks like this
<input type="file" class="form-control" name="uploadCover" value="" />
and my css looks like this
input[type="file"]{
padding-bottom: 4em;
padding-top: 2em;
width: 100%;
border: 1px dashed #000;
}
input[type="file"]:hover{
border: 1px dashed #67a5c5;
}
and the field looks like this...ignore the ugly yellow!
Any help or ideas would be wonderful! I'm really trying to avoid javascript.
How about this for a starting point? It uses a :after pseudo element, so that the content you're adding follows the control itself.
It is "centre aligned" (using margin auto 50%) to avoid overlapping the filename text, but you'll probably need add some more CSS to make sure this doesn't happen on your web page.
input[type="file"]:after {
content: "Drag and drop";
display: block;
min-width: 20em;
margin: auto 50%;
}
http://jsfiddle.net/jrG7v/
Edit: as pointed out this only works in Chrome. No text is displayed in Firefox, and IE11 (seems I've been upgraded since I last used IE10) still displays the text-style input box. Hopefully somebody else has a better answer.
For compatibility with browsers, I'd go with:
<div>
<input type="file" class="form-control" name="uploadCover" value="" />
<div class="drag">Drag and Drop</div>
</div>
div.drag { min-width: 100px; margin-top: -25px; padding-left: 10px; font-family: arial; font-size: 12px;}
Fiddle:
http://jsfiddle.net/jrG7v/3/
I have an annoying display issue in IE (7/8). I have some tabs that serve as navigation, the tabs have the top and bottom sections cut off for some reason in spite of my efforts to make the box bigger.
In Chrome and Firefox this all displays correctly as you can see in the images below. Note I have artificially moved the tabs into an empty area of the page so its easier to see whats going on.
How it looks in IE:
How it looks in Chrome
Now obviously IE doesn't render the rounded corners, that's fine (unless someone knows something I dont) but as you can see the height of the links in IE are smaller than Chrome and actually clip the top border off.
HTML
The HTML is simply <a> elements within a <div> like so
<div id="topnavcontainer">
<a href='/web/link1.html' class='current'>Link 1</a>
<a href='/web/link2.html'>Link 2</a>
<a href='/web/link3.html'>Link 3</a>
</div>
CSS
#topnavcontainer {
display: block;
color: #fff;
font-size: 14px;
position: absolute;
right: 0;
bottom: 0;
height: 40px;
}
#topnavcontainer a {
color: #555;
text-decoration: none;
padding: 5px 12px;
font-weight: 800;
overflow: visible;
background-color: transparent;
border: 0;
line-height: normal;
bottom: 0;
height: 40px;
}
As you can see I have tried to overcome the problem by specifying normal line-height as well as making the overflow visible. I have also tried making the links and containing div much higher than they should be just in case there was a weird height issue. Nothing seems to solve it.
Set the link to "display: inline-block;". As for IE6/7, do "display: inline; zoom: 1;" instead.
I've seen this problem happen before on block elements. The "inline-block" solution seemed to fix it.
Try adding float:left;
It's possible that your padding isnt even working.
if this solution doesnt work,
make a different CSS for IE and set a different height for IE.
also, try to put a button on your website asking your visitors to download Firefox or Chrome...
it will make the internet better! :D
We have buttons of many sizes and colors that use background images. There is a label on the background image itself, but we need to keep the button's text in the HTML for usability/accessibility. How do I make the text disappear in all browsers?
Modern browsers are easy, I just used -
color: transparent;
It's Internet Explorer 7 that I can't get to comply. I've tried these CSS properties, and none of them can remove the text completely without destroying my site's layout in the process.
font-size: 0px;
line-height: 0;
text-indent: -1000em;
display: block;
padding-left: 1000px;
I would very much appreciate any help.
Personally, I go for the all CSS approach:
{ display: block;
text-indent: -9999em;
text-transform: uppercase; }
For whatever reason, text-transform: uppercase; does the trick for IE7. Of course, you'll probably have your own CSS along with that for additional styling (if needed).
Additional to your
color: transparent;
You can use something like
padding-left: 3000px;
overflow: hidden;
Regards
In some cases you can use the propery "content" to change what is contained in the element, personally though I would use javascript to do it.
Just write blank text into the element.
If the button is an input submit button, use the image
<input type="image" src="/images/some_image.png" />
You can style this with CSS
input[type="image"] {
border: 1px solid red;
width: 150px;
height: 35px;
}
If they are links, Dave provided the answer.
How do I make the text disappear in
all browsers?
I suppoose you want the altarnative text to disappear if the image is loaded.
For this puprpose you can use this:
<INPUT TYPE="image" SRC="images/yourButtongif" HEIGHT="30" WIDTH="100" ALT="Text In Case There Is No Image" />
You can apply additional styles if needed, but this minimum will do the job for you.
If I understand the question correctly, this might work (I don't have IE7 to test on at the moment, so not 100% sure)
For markup like this:
<a href="javascript:return false;" class="button" id="buttonOK"><span
class="icon">Ok</span></a>
Use this css:
span.icon {
/*visibility: hidden;*/
display:block;
margin-left:-1000;
width:100px;
}
or this might work depending on your requirements for usability/accessibility:
span.icon {
visibility: hidden;
}
I don't know what users / programs the labels need to be in the HTML for, but if it's for text browsers and such, maybe you could insert a JavaScript that removes the labels onLoad?
JQuery or Prototype would make that very easy.