hi guys this is my previous post i really need to get this fixed so im gonna post this here:
trouble with padding IE, FF, Chrome
I don't know the exact problem here, but I guess it's the button.
Try putting position: relative; left: -10px; in your img tag as style.
EDIT: Or maybe a bit more pixels. Fit it to your likes.
Related
I'm trying to align horizontally two images that are next to each other with different dynamic text under it. If you review the image I attached it's pretty clear what I'm trying to do. I don't think flexbox properties like flex-end or flex justify-content: space-between will work here. Thanks for your help in advance.
https://i.stack.imgur.com/QYCMh.jpg
enter image description here
So I figured out a solution. I used calc() to achieve the results
position: absolute;
width: calc(100% - 50px);
margin-top: calc(112.1% - 980px / 25);
This calc keeps the image stuck to the image next to it. Not sure what the unit numbers mean, I basically fiddled with the units until I got the results I wanted.
Heres the result https://gifyu.com/image/vnPX
First and for most I would like to say "Hello" to the community. I'm an entry level junior web designer fresh out of vocational school. Most of my styling in CSS I've taught myself so this has led me to some problems. Such as the one below.
This is a sample of my navigation bar that I'm using for my site. Each of the div boxes are supposed to slide out to their corresponding positions over 2 seconds. However with every browser aside from chrome they snap out quickly instead of a smooth transition.
http://jsfiddle.net/kwh71787/cxBxL/
If anyone has any insight please help
Try using this style instead:
#navbuttons div {
position: absolute;
left: 0px;
}
DEMO
Welcome to Stack Overflow!
This seems to fix it. What I've done is I've added top: 0px; and left: 0px; to each div.
Here's an updated jsfiddle
Hope that helps!
I have this: http://jsfiddle.net/cN2pS/embedded/result/
And I'm looking for the best way to adapt the divs inside the circles (text and number) in order to these divs (text and number) don't overflow of the circles......I don't know if I'm explaining well, but in different resolutions, sometimes, text overflow of circles.....
When you visit the link above of jsfiddle, try to resize the window and you'll can see the left-bottom circle, that contains Zona de Información, its text overflow...
Regards, Daniel
EDIT: It looks like works better by adding overflow:hidden; and reducing the font-size to 14px. Live example: http://jsfiddle.net/cN2pS/8/embedded/result/
EDIT2: Only one question more: do you know any tutorial, live examples, etc, with efficient use of media queries in order to adapt to resolutions of mobile devices? in order to adapt these circulars divs...Or I have to resize my desktop browser window much times...Any magic tool for this? :) Thanks
Thanks very much for help.
May be you can use CSS word-wrap: break-word; property for this:
#divInfIzq {
bottom: 15%;
left: 15%;
position: absolute;
word-wrap: break-word;
}
Check this http://jsfiddle.net/cN2pS/5/embedded/result/
Are you asking for something like this?
http://www.we-are-gurus.com/tools/responsive-design-tester.php?url=http%3A%2F%2Fsmore.rvadv.com&d=320x480&scroll=off
I use this when I am designing for mobile devices and it works pretty well.
I seem to be having two problems:
My top nav bar links don't work in Firefox
The design breaks in IE7.
Any help would be much appreciated! I have validated it, and I know the slider and video don't validate, but I still have these problems even when I take those out. Thanks so much for any help you can provide!
http://www.christthesavioracademy.org
You can fix the IE7 problem by making the following changes:
On #content, add position: relative; padding-top:1px.
On #logo, remove the margin and add position:absolute; top:0; left:9px.
On #bottomnav, remove clear: both.
I can't reproduce your Firefox issue. If there is still a problem, hopefully the steps above will have helped.
I'm running into a vertical positioning problem with a couple of elements on a page in Firefox 5. When I set a line-height on a piece of text, and give it an equal height, it doesn't center vertically the way it should. Instead it sticks to the top of its line-height.
The page in question is here: http://www.tyndale.ca/~missiodei/
Here are the two problem elements along with their CSS. In both cases the text is pushed up in FF5 but displays properly (vertically centered within its line-height) in Chrome/Chromium.
the large title link in the banner (#blogtitle a)
position:relative;
display:block;
margin:0;
padding:0;
color:#fff;
text-decoration:none;
letter-spacing:.1em;
font-family:"Palatino Linotype", Palatino, serif;
font-weight:bold;
opacity:0.6;
height:120px;
line-height:120px;
any of the drop-caps that float at the beginning of new sections of body text (p.openingPar:first-letter)
font-size:3em;
font-weight:bold;
position:relative;
float:left;
height:48px;
color:#ccc;
line-height:48px;
margin-right:4px;
You might not see these drop caps unless you look at the page using Chrome or Safari, since most of them aren't showing up at all in FF. (I'm not sure why these styles aren't being respected either).
Finally, it would be helpful to know whether this is a problem unique to FF5 or whether 3.6 and 4.0 have the same problem. I don't have any old versions of FF available for quick testing.
Thanks ahead of time for help. I've imprinted my keyboard on my forehead bashing my head over this one!
The vertical centering seems to work fine for me....
The lack of first letter styling is https://bugzilla.mozilla.org/show_bug.cgi?id=8253
Try using <span class"dropcaps">W</span> instead of styling your opening first letter in the paragraph by selector :first-letter. Let us know if it works.