I have an infoBubble with some text and images. The right aligned image (arrow) is pushed down in Firefox (Mac) but not Safari or Opera dependent on the length of the text to the left and above. See the marker over Australia: http://www.hostelbars.com/map_test_v3_3.html
Here's the css:
.infowindow {
background-color: #000;
color: #FFF;
font-size: 18px;
font-family: Helvetica Neue, Helvetica, Arial;
text-shadow: 0 -1px 0 #000;
font-weight: bold;
position: relative;
overflow: hidden;
}
.infowindow .iwPhoto {
background-color: #F00;
position: relative;
padding-bottom: 1px;
padding-top: 2px;
padding-left: 5px;
}
.infowindow .iwName {
background-color: #0F3;
line-height: 33px;
white-space: nowrap;
position: relative;
margin-left: 115px;
margin-top: -70px;
padding-right: 5px;
padding-top: 2px;
}
.infowindow .iwCity {
background-color: #C03;
line-height: 32px;
margin-left: 115px;
padding-bottom: 1px;
}
.infowindow .iwCity .iwArrow {
background-color: #0CF;
padding-right: 5px;
padding-left: 5px;
margin-top: 3px;
float: right;
}
Aside from the images I don't want the div's to have a fixed width. Would appreciate some help.
Brendon
Seems to only happen the first time, and for items with city values longer than name values. This suggests you didn't set width and height values for your img element (arrow.png), so the first time it has no idea what size it's going to be, and subsequent times it does.
What you should probably do is change it to a background image, as it's merely an iconified decorative image meaning 'next' or 'more', and thus should be in CSS's realm of style, not HTML's realm of meaning (where 'img' lives). See this list of image replacement techniques.
Otherwise, you could just apply img[src$="arrow.png"] { width: 29px; height: 29px; }, or add width and height attributes to the img element.
Related
In order to solve an issue at work, I've been learning how to do paragraph numbering with css. So far, I am pleased with the results for standalone text passages. However, my requirement is to do the same in a scroll box with a vertical scrollbar.
As you can see here: http://jsfiddle.net/Lceewqj3/3/, I have gotten close by removing absolute positioning from the paragraph numbers, and adding a right margin, but I am still having a problem getting the paragraph starting left edge to be positioned correctly. My solution must work correctly for double-digit paragraph numbers as well as single, so the fixed right margin doesn't work, as you can see by scrolling down to paragraph 10. I tried adding a width property, but that didn't work either.
Note that modifying the existing passage-scrolling style is something I am not at liberty to do, so I need a solution that involves only manipulating the chapter and/or page styles.
Here is the css for the fiddle:
.chapter {
counter-reset: paragraph;
padding-left: 30px;
}
.page p {
width: 75%;
}
.page p:before {
//position: absolute;
margin-left: -30px;
margin-right: 14px;
color: #000;
font-style: italic;
content: counter(paragraph);
counter-increment: paragraph;
}
p {
margin-top: 10px;
font-family: 'Raleway', sans-serif;
font-size: 17px;
line-height: 22px;
font-weight: 400;
}
.passage-scrolling {
padding: 0 5%;
height: 340px;
width: 89%;
border: 2px solid #999;
overflow-y: auto;
margin-bottom: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Someone at work figured this out for me. The answer was simply to add float:left; and text-align:left; and remove the right margin from the .page p:before style. See the result here: http://jsfiddle.net/Lceewqj3/5/
Here's the final css that worked correctly:
.chapter {
counter-reset: paragraph;
padding-left: 30px;
}
.page p {
width: 75%;
}
.page p:before {
float: left;
text-align: left;
margin-left: -30px;
font-style: italic;
content: counter(paragraph);
counter-increment: paragraph;
}
I'm trying to create bootstrap button with icon floated on the left and it has right border fills the full height of the button.
I have tried the following CSS:
a.btn.btn-xlg i {
float: left;
border-right: groove;
height: 100%;
display: inline-block;
padding: 0 4%;
}
And the HTML is:
...
<i class="fox-job"></i>Jobs
...
The following is a screen shot for what I have gotten:
Update
[class^="fox-"]:before, [class*=" fox-"]:before {
font-family: "fox";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
font-variant: normal;
text-transform: none;
line-height: 1em;
margin-left: .2em;
font-size: 140%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 0px 1px 5px rgba(255, 207, 118, 0.9);
}
Is there any way that allows the border to cover the full height of the button as shown in the screen shot?
By the way if there is, but it is not essential, any solution direction less would be better. i.e in the rtl documents it does not need modification to float the icon to the right instead of left.
Update 2:
According to Ghassen Louhaichi answer, I have got that screen shot:
And I used the following CSS :
a.btn.btn-xlg i {
float: left;
border-right: groove;
/* height: 100%; */
display: inline-block;
/* padding: 20px 16px; */
height: 72px;
padding: 20px 5px 0 0;
margin-top: -20px;
margin-bottom: -26px;
}
There is a padding in the button that you either need to remove and place the contents of the button in the vertical center manually, or add the following CSS rules to your class to counter the effect of the padding using negative margin (you may have to play around with the value a bit until it looks right) :
a.btn.btn-xlg i {
/* the other attributes... */
/* set the icon height to the button height */
height: 34px;
/* pad the icon to be at the center instead of the top */
padding: 9px 4%;
/* adjust the negative margins to counter the padding effect */
margin-top: -8px;
margin-bottom: -6px;
}
IE 10 and 11 hasn't disappointed me so much when it comes to css until today . .
The class base and triangle has about 1px gap in between in IE 9 - 11. The other 4 browsers are not showing the gap.
.base {
display: inline-block;
position: absolute;
bottom: 5px;
right: -8px;
background-color: #ffcc00;
color: #5A5A5A;
font-size: 12px;
font-weight: bold;
padding: 2px 5px;
text-decoration: none;
margin:0;
}
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 0 0 11px;
border-color: transparent transparent transparent #DBB004;
display: inline-block;
position: absolute;
bottom: 24px;
right: -8px;
margin:0;
z-index: -1;
}
Here's a FIDDLE
This is not a bug. This is the correct rendering of display: inline-block; elements by the browser. The browser spaces inline-block elements using a width equal to a single white space character of the font (therefore, the larger the font, the wider the gap).
You can read how to solve this issue at CSS Tricks here. However, generally a negative margin-left of -4px (if your body font size is 16px) will remove the white space. For example:
.element {
display: inline-block;
}
.element ~ .element {
margin-left: -4px;
}
Edit
A better way of handling the white-space is to set font-size: 0; on the parent element and reset the font-size: 18px; or whatever your body font-size is on each of the elements with display: inline-block; elements`. This will handle browser zooming and hires displays better than the method I described above. Obviously, this strategy sometimes require an additional parent element, which might break your layout styling.
Change the .triangle margin to -1px.
Another way of solving it, is by putting the triangle inside the base-element. Easiest would to replace it with an ::after pseduo-element.
.base::after {
content: '';
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 0 0 11px;
border-color: transparent transparent transparent #DBB004;
display: inline-block;
position: absolute;
top: -10px;
right: 0px;
margin:0;
z-index: -1;
}
http://jsfiddle.net/WrVYd/21/
I am trying to have the main container of my site to center automatically when the explorer window is bigger, or to stick to the left whenever the explorer window is narrowed.
How would I achieve that with CSS?
Most sites do it nowadays, bloomingdales.com for example.
When you make your browser smaller, the main container stays on the left, and as soon as you open your browser on the right side, the main container automatically gets centered.
Thanks!
My site: www.tahara.es
ADDING CSS:
body {
margin: 0 auto;
font-size: 11px;
font-family: Arial,Helvetica,Verdana,Sans-serif;
color: black;
font-weight: normal;
}
.mainContainer
{
position: absolute;
width: 850px;
min-width: 850px;
margin: 0 auto;
border: 0;
}
body {
font-size: 11px;
font-family: Arial,Helvetica,Verdana,Sans-serif;
color: black;
font-weight: normal;
}
.mainContainer
{
width: 850px;
min-width: 850px;
margin: 0 auto;
border: 0;
}
This should do it:
body {
font-size: 11px;
font-family: Arial,Helvetica,Verdana,Sans-serif;
color: black;
font-weight: normal;
}
.mainContainer {
width: 850px;
min-width: 850px;
margin: 0 auto;
border: 0;
}
View on JSFiddle
The key is that there is no position: absolute; on your div. That property removes the element from the normal document flow, such that it has no parent element. margin: 0 auto; determines the left and right margins from the parent element. Putting two and two together, you can see that they're incompatible.
On this page I'm trying to position quote images around the block quote but they won't sit right.
This is the CSS:
blockquote {
padding-left:10px;
color:#444;
font-style: normal;
width: 500px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}
blockquote p {
padding: 0 100px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}
I want to keep the images the same size ideally. I just want to make the text stop overlapping the images. I tried specifying the width of the .blockquote as 500px but it didn't seem to make any difference.
Any ideas would be welcomed. Thanks - Tara
Two things:
In order to see the images behind
the text you should not specify a
background color for the inner paragraph; make
it transparent instead.
The specified padding is not applied due to another property (.entry p) which is more specific. You could set this blockquote padding to !important but that's generally not recommended, another option is to make this one more specific than the other (.entry p) by adding the .entry class. Be aware that only blockquotes with a parent .entry class will be selected this way. (more info about specificity)
The css:
blockquote {
padding-left: 10px;
color: #444;
font-style: normal;
width: 500px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}
.entry blockquote p {
padding: 0 100px;
background: transparent url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}
Try adding this property:
.entry p {
margin: 5px 5px 5px 15px;
padding: 0px 40px 0px 0px;
line-height: 20px;
font-family: Tahoma,Georgia, Arial,century gothic,verdana, sans-serif;
font-size: 13px;
}
I managed to get the following:
Hope that helped (:
Depending on the browser support that you need, you can try it without images, using CSS:
blockquote {
padding: 0;
margin: 0;
border: 1px solid blueviolet;
}
blockquote:after,
blockquote:before {
color: #ccc;
font-size: 4em;
line-height: 0;
height: 0;
vertical-align: -0.5em;
display: inline-block;
}
blockquote:after {
content: "”";
margin-left: 0.05em;
}
blockquote:before {
content: "“";
margin-right: 0.05em;
margin-bottom: -0.5em;
}
Live example here
(Tested on Firefox and Chrome only)