Problem with width

[boholsea]

Hi,

i insert this code in item in Joomla:

Code: Select all

<div style="width:auto; padding:0; margin:0;"><form id='ac00001296' style='display:inline;' method='GET' target='_blank' action='https://www.beds24.com/booking.php'><script type='text/javascript' src='https://www.beds24.com/availcal/00001/ac00001296.php'></script><input type='hidden' name='roomid' value='1296'><input type='hidden' name='type' value='0'><input type='hidden' name='fdate' value=''><input type='hidden' name='referer' value='Calendar'><input id='beds24submitbutton' type='submit' STYLE='width:184px' value='Check Availability' title='Click to check availability and make a reservation online'><script type='text/javascript'>document.getElementById('beds24submitbutton').style.display='none';</script></form></div>

I have a problem with the width from this calendar and tge font.

Please find attached a image.

Can You help?

Thanks and kind regards

Andreas

[annedawn]

Hi Andreas,

Can you send a link so I can have a look at the code in context? If you prefer you can send a message via "Support" / "Help"

[boholsea]

Hi,

thanks for your resonse an your help.

http://www.neil.checkdivers.com/index.p ... r-bungalow

Kind regards

Andreas

[markkinchin]

The two buttons to go back and forward a month are inheriting padding from your style CSS.
The inherited padding is making them bigger than normal and causing the second button to wrap onto the second line.

You can override the CSS padding for the buttons and make them smaller with the following CSS

Code: Select all

.beds24availcal input {padding:5px;}

Either add the above directly to your CSS or add the following to the HEAD section of your page, if necessary change the 5px to a better value.

Code: Select all

<style>
.beds24availcal input {padding:5px;}
</style>

[boholsea]

Hi,

thanks for your response and your help. Do you have a solved for my problem with the font?

Thanks and kind regards

Andreas

[annedawn]

Hi Andreas,

I guess you mean the alignment? You can change this you will need to add:

.beds24availcal {font-family: Arial,Helvetica,sans-serif;}
.beds24availcal input {padding:5px; float:none; display:inline;}
.beds24availcal select {float:none; display:inline;}
.table th a {font-family: Arial,Helvetica,sans-serif;}
.beds24availcal th {text-align:center;}

to your override.css.

Best regards, Annette

[ab11hotel]

hi, I too am having an issue with this,

I have included the following in my Style.css:


.beds24availcal {font-family: Arial,Helvetica,sans-serif;}
.beds24availcal input {padding:5px; float:none; display:inline;}
.beds24availcal select {float:none; display:inline;}
.table th a {font-family: Arial,Helvetica,sans-serif;}
.beds24availcal th {text-align:center;}

the padding issue for the date selection buttons is resolved, however the width of the calendar is not correct, & fonts are still being inherited,
this is also true for all of the widgets, making them especially ugly

thanks for your help,

Andrew

www.ab11hotel.com

[annettemorgenroth]

I cannot find the widgets on your web site. Most likely your theme css overrides the styles. Try this for the availability calendar:

.beds24availcal {font-family: Arial,Helvetica,sans-serif !important;}
.beds24availcal input {padding:5px; float:none; display:inline !important;}
.beds24availcal select {float:none; display:inline !important;}
.table th a {font-family: Arial,Helvetica,sans-serif !important;}
.beds24availcal th {text-align:center !important;}

To help you with the other widgets I will need a link to the pages so I can check the code. If you prefer you can use the tickets system to send the link.

[ab11hotel]

thanks Annette,

i'll give that a try,

i'm currently testing things out on the dev site before we go live in the next couple of days, so will send you links when we go live.

Thanks,

Andrew

www.ab11hotel.com