CODEWITHSUNDEEP
htmlcss
hjavaher
hjavaher

Reputation: 2617

HTML Formatting that just doesn't want to work

Simple html formatting that I just can't seem to gt right.

I have the following div: 

<div class="fc-event-time" data-hasqtip="true" aria-describedby="qtip-6">
      2:54 - 6:54
    <i class="icos-refresh" style="float: right; margin-top: -17px; margin-right: 2px"></i>
    <i class="icos-acces-denied-sign" style="float: right; margin-top: -17px; margin-right: 2px"></i>
</div>

that according to firebug has the following css classes acting on it:

padding-left: 5px;
white-space: nowrap;
font-weight: 500;font-size: 12px !important;
padding: 0px 1px;
color: rgb(0, 0, 0) !important;
cursor: pointer;
direction: ltr;
text-align: left
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 18px;

Now the above code is rendering like below:

enter image description here

if you can see, there are two icons on top of one another, the <i></i> elements', my problem is that I would like to have it side by side. My first thought was to adddisplay:block;` but that doesn't work. how can I have them line up rather than superimposed?

UPDATE:

After taking out the margin-top: -17px; I get the following results, but I need them (the text and the icons) to be in the same row.

enter image description here

UPDATE 2:

Finally Figured out the problem and fixed this issue, it turned out to be the 2:54 - 6:54 plain text that was not allowing the <i>s to get in the same line. all I did was modify the Full Calendar source to place the time inside a <span> and gave it a style attribute of `float: left' and its all lined up and working now. Thank you all for helping, if a better answer is submitted (one that I don't need to modify the javascript I will still award it as an answer since that would be a better method.

Upvotes: 1

Views: 103

Answers (1)

Pebbl
Pebbl

Reputation: 36075

As far as I can tell you don't have any widths applied to your i icons, plus the negative margin-tops could be playing havock with the floats. If you define actual widths for your i elements you shouldn't have a problem (at least based on what I can see).

If that doesn't work you may also have some kind of absolute positioning involved. If this is the case, and is applied to the i elements, then you'll need to remove it.

But without seeing the style applied to the i elements it's a bit impossible to tell.

update

Ah, ok so the negative top margin was causing the issue. In order to get your text and your icons to align on the same line you'll have to wrap the text with a span and apply a float:left to it.

<span style="display: block; float:left;">2:54 - 6:54</span>
<i class="icos-refresh" style="float: right; margin-right: 2px"></i>
<i class="icos-acces-denied-sign" style="float: right; margin-right: 2px"></i>

However I'd recommend that you not use inline styles and extract these to specific css classes.

Upvotes: 1

Related Questions