This code works fine in Chrome and Firefox. But in Safari, the drag handle won't work if there is padding beyond 11px.
Is this a bug in Safari, or is there something silly I'm missing?
<style>
textarea {
padding: 11px 16px;
}
</style>
<textarea>Stuff goes here. Does my drag handle work?</textarea>
I ran into the same problem yesterday, and have unfortunately not been able to find a direct solution to this problem.
As an alternative, you can ditch the resize handle entirely, and look into making your text area auto-resizable. Personally, I feel like this makes for a better design anyways. You completely avoid the problems of the resize handle, and your users get the additional space they need for their text, without having to mess around with a tiny handle themselves.
This post has some good examples on how this can be achieved.
Related
So yeah, I'm working on coding a website, and I'm primarily using the font "Robot Condensed" ( http://www.google.com/webfonts/specimen/Roboto+Condensed )
Now the problem is I have a jQuery thing, where you hit the button and it expands to the full text. When you hit this though, the all of the font-weight: 300 texts on the page mess up, with no apparent way to return them to normal except by refreshing the page.
I don't believe the problem lies in the Javascript though, because I don't know of what in it could cause this, and also, it was doing this yesterday as well, before I implemented any Javascript (you would just scroll down the page and after a few seconds the font would mess up). I've only seen this issue in Firefox.
Normal
http://prntscr.com/t009m
Broken
http://prntscr.com/t005u
Normal
http://prntscr.com/t00fl
Broken
http://prntscr.com/t007z
It's like the font is becoming more thin or something. Has anyone ever experienced anything like this or might have any idea what's causing it?
Thanks.
EDIT: Okay, it seems to happen when I use any kind of jQuery on the page.
I am working on a website simkt.com and just moved over to joomla 2.5 after rebuilding the base theme to match the desired look.
Unfortunately, being a novice web developer that I am, I forgot to check out how things looked in browsers other than Chrome. The site is now live, and I quickly discovered that in Firefox/IE that the website is not quite right, and after some adjustments, that when I make adjustments to try and fix the issues, there is around a 5 pixel difference in spacing between Chrome and Firefox/IE (and I tested now in IE 7 and it was.. quite bad).
So, my question is, what am I doing wrong, and how can I go about fixing this?
Using Chrome dev, I reduced the top-padding in rt-body-bg to 0, and in the logo itself, decreased the top-margin to -30 and bottom-margin to -25 and it looks close to what I want, but has a 5 pixel gap between the logo and the menu on Firefox, and in IE the login button starts to move off in some odd direction.
I know some css/php/html but am I am still learning, any help would be greatly appreciated!
Thanks!
Note that different browsers have different default values for the css for the different elements. A good practice when you program design with CSS is to use a reset values in the beginning of the css file. This reset is going to make sure that the unset values will be the same for every browser.
See this link for a css reset code
http://meyerweb.com/eric/tools/css/reset/
Hope it helps
As #Stoyan said, you should be using a CSS reset at the beginning of your CSS file.
You specifically mention margins. I've just had to resolve an issue whereby in our site margin-top was used to position items (not a great idea - blame the previous developers). In IE and Chrome it was fine but in FireFox, because it has a different top margin, it looked bad (items were 30px too low).
I didn't want to use an entire CSS reset because it might have had a knock-on effect for the entire site (fonts were all changed for example).
I used just one item to resolve it, curiously not margin-top but line-height:
body {
line-height: 1;
}
I cant get rid of the gaps between divs when i scale or zoom the web page. In firefox it works like a charm, but when i try i IE9 1px row appears down, but nowhere else. If i try with safari, at "real size" or 100% zoom, it works, but as soon as I change the zoom, increment or decrement, i mean, zoom in or zoom out tons of rows appear. With Chrome is the same; 100% is ok, 110% is bad, 115% gets better but not perfect....
I tried this;
margin-top:-1px
but after appliying it here and there, as soon as I zoom in or out, new 1px rows appears
also tried the
border-radius: ;
-webkit-border-radius: ;
-moz-border-radius: ;
but didnt work either.
It could be something related to the fact that they are all absolutes? I wont export anything again from photoshop, but i would like to finish with this
THANSK!
P.S.; here is the url
http://www.butterfly-paradise.com/
I think the seams are coming from a combination of absolute positioning and having a bunch of images butting up against each other with a different background color. The larger problem is that this is not a great way to do layout.
The seams don't impair the usability of the site, and it's relatively rare that people even use browser zoom, so it's up to you whether it's worth it to fix.
If you want to try fixing it, I'd recommend starting from scratch. There won't be any way to fix it from within Photoshop, and trying to edit the code it generated would take longer than just doing it over. You could try something like Dreamweaver, or even coding it by hand. If that sounds too intense, just leave it. But if it sounds kind of exciting, go for it.
I'm having an odd problem with some floated divs on this page that I'm working on. There are 3 of them across the page, with 1em margins between. In Chrome they line up perfectly, but in IE and FF, the right hand one drops a little - but not all the way below. I thought this might be best described with a picture, please see below:
I can't work out which bit of the CSS is causing this - I've been through the new FF code inspector and highlighted all block level objects with the webdev toolbar but can't see anything that would cause such a drop.
I did wonder if it was something within the JS twitter feed causing it, but I've swapped round the Twitter and "Update" boxes and it's always the right-hand one. I've also tried removing additional elements from the page - everything between the menu and these three boxes.
I must admit, I'm at my wit's end! Can anyone spot something obvious I've missed? The CSS is fairly large, and I'm not sure which bit to show, so I haven't copied it in in, but will do if anyone desires. Otherwise everything can be viewed at http://www.woodexperts.com
Change width: 15.25em in div#main div.tricolumn to width: 15.24em
That should take care of the issue.
I understand that this is a hack, but if IE is the only browser causing problems, you might want to consider IE conditional comments that restrict certain styles only for IE:
http://msdn.microsoft.com/en-us/library/ie/ms537512(v=vs.85).aspx
See this link - why are the multiline textboxes draggable?
Is this Firefox bug? It just spoils the design like anything.
Even the same in happening is Stackoverflow's textbox. I am using Firefox 5.0
Thanks in advance:)
Edit:
See these photos of SO itself:
This is a feature that's been included since Firefox 4. However, you can switch it off by including resize: none in the css of the given Textarea(s).
That's something happening since some time now even on Chrome and maybe other browsers too. I think it's to allow a better experience for the users who need to type text in the textarea, so I definitely think it's not a bug.
But it indeed can mess up your website layout. You have to use some CSS to fix it, like
#yourtextarea {
width: /* fixed width here */
height: /* fixed height here */
}
In case the above doesn't work, you may also think about use min-width, max-width, and the height equivalents.
I won't mess up with this anyway, since it's a browser feature and so it's something useful for the users.
Why are the multiline textboxes draggable?
They aren't. Dragging just selects the text inside them. They can be resized though, which is great as it lets users make textboxes bigger so they can see more of their text if they have typed a lot.
Is this Firefox bug?
No, it is a feature. I think Chrome got it first.