Missing stars

HTML & CSS
1

Hi

I am transferring some code from one page to another and introduced a larger image of the stars,

In the test page below I should have 5 stars; instead I only have three and there seems to be a max-width and max-height somewhere that is cutting the stars but I cannot see where

http://pintotours.net/TEST/IbisShinjuku.html

The original css code came from the stylesheet for this page

http://pintotours.net/Americas/DomRepublic/Punta.php

help…

2 
.five {
    padding-left: 75px;
}

Here should be 150px because each star is 30px wide (but they are 15px wide on original page)

3

Ahhhh…

many thanks megazoid

4

Sorry but my problems don’t stop there.

I need the stars on the left and the updated on the right to be in the same line.
I thought I could solve that by wrapping them both in a div with display:inline; but it did not work

5

Modify these styles:

.five {
    padding-left: 150px;
    padding-bottom: 12px; // remove that line
}

.star {
    padding-top: 16px; // change to 28px
    display: block; //add this
    float: left; //add this
    // ... rest of rules ... //
}

And add this:

#update { float: right; }
1 Like
6

Hi

I may not have understood your instructions because it still does not work

The idea is to get the “update” back to where it was before I added the stars (close to the top) as ither wise it will upset the images below when they are enlarged. besides, I prefer it that way.

7

@megazoid, please note that double slashes are not valid CSS comment marks. They are JavaScript comment marks and will cause CSS to fail. In defence of our members who copy and paste without knowing better, I recommend that you use valid CSS comment marks /* ... */

1 Like
8

Start over.

Relocate your 5star span inside #update, after the “updated” <p> tags

9

omg, I just used them to show where to make changes

1 Like
10

APOLOGIES!

It works, I was using IE11 and had not cleared the cache.

many thanks!

11

Who might not know that?

2 Likes
12

Have no idea who would copy and paste code related only to the specific site, but ok, I will use other comments if it matters so much.

1 Like
13

A newbie may not copy and paste your code, but they see your example and believe it is valid. They may not know anything is wrong with it. I have seen it happen here several times. If nothing else, it’s just good practice to post valid code.

2 Likes
14

qim,

Do you have time for a short CSS lesson?

hotelUno.css (line 656)

#content #box4 p {
    font-family: Roboto,Helvetica,sans-serif;
    font-size: 17px;
    margin-bottom: 12px;
    padding: 3px 10px 10px 20px;
    text-align: justify;
}

This CSS targets every p in #box4.

It overrides the font-size and margin that you think are being applied in this rule…
(line 629)

#update p {
    float: right;
    font-size: 11px;
    font-style: italic;
    font-weight: 300;
    margin: 0 10px 0 0;
}

and so on everywhere in box4 on every page where this rule exists. It is cumbersome/weighty to override.

FYI, again, you need to improve the way you target selectors and eliminate strings of IDs.

15

Hi thanks ronpat

That explains many things…

So, you’re saying that my font-size in "update is 17px and nit 11px?

16

Yes.

17

Oh, well

It looks good, anyway!

I’ll try !important just for fun.

18

!important should override the heavier style. Unfortunately, considering the very broad number of <p> tags on the page, and the styles applied, that potentially adds up to a lot of !importants… a phenomenon that gave rise to the saying, “If everything is !important, then nothing is important”.

Old code that was unknowingly poorly written like that, is cumbersome to work around, but very worthwhile to fix properly at one’s earliest opportunity before more band-aids accumulate.

Think about it… do you have any idea which <p> tag or tags that rule was originally meant to target?

19

No! Tell me. (paragraphs?..)

While we’re on, do you know if it is possible with html/css to present just a central section of a page in a popup?

If you look at my main pages like http://pintotours.net/Europe/Spain/Barcelona.html the hotels have a “Look inside” button that brings up a popup, which is in fact part of a full page, with the sidebars hidden

The new pages that you helped me with are, at the moment, substituting those popups, but I have reasons to try and bring them back.

So, the idea is that when you press that button the appropriate NEW full page is called but somehow only #box4 is visible in a reduced sized page.

The current code uses a popup script but I would prefer css/html

Did I make myself clear?

20

Did you not get any help from Microsoft about this issue?