When I roll over an event the pop up box is very thin and long. Is there a way to make this wider. An example of this issue is http://shophilltopmall.com/EventsPr...ents.aspx. I am running Events version 5.2.1 and DNN version 06.00.01. Thanks,

Everything is CSS.

In this case, the class Eventtooltip will do the trick. Set its width to 150px and see if you like that.

And ... dig around for some documentation on Themes for the Events module to see if this is the best class to use.

I didnt have any luck getting that to changed. All themese show up the same way. Here is a copy of my css for the grey theme I have changed it to, with teh chagnes I thought you asked me to make. Any ideas?

.ThemeEvents-Grey .Eventtooltipheader,.ThemeEvents-Grey .Eventtooltipbody{width:300px;z-index:99;font-size:10px;font-family:Arial;padding:5px}
.ThemeEvents-Grey .Eventtooltipheader{border:#808080 1px solid;background-color:grey;color:#FFF;font-weight:700;font-size:11px; width:150px;}
.ThemeEvents-Grey .Eventtooltipbody{width:150px; border-left:grey 1px solid;border-right:grey 1px solid;border-bottom:grey 1px solid;background-color:#fff}

.ThemeEvents-Grey .Eventtooltipbody hr{width:200px;color:#000;background-color:#e0e0e0;height:1px;border:0}
.ThemeEvents-Grey .Event{table-layout:fixed;width:100%;font-size:9px;color:#000;font-family:Verdana;text-align:center;border-right:grey 2px solid;border-top:grey 1px solid;border-left:grey 2px solid;border-bottom:grey 2px solid;white-space:normal}
.ThemeEvents-Grey .EventTitle,.ThemeEvents-Grey .EventTitle td{font-weight:700;font-size:14px;width:100%;color:#333;height:20px;text-align:center;background-color:#e0e0e0;font-family:Verdana;border-bottom:0 grey solid}
.ThemeEvents-Grey .EventDayHeader{font-weight:700;font-size:12px;height:16px;background-color:silver;vertical-align:middle;font-family:Verdana;border:#707070 1px solid}.ThemeEvents-Grey .EventDay,.ThemeEvents-Grey .EventDayEvents,.ThemeEvents-Grey .EventWeekendDayEvents{font-size:10px;text-align:left;height:100px;vertical-align:top;color:#000;font-family:Verdana;background-color:#C0C0C0;border:1px grey solid}
.ThemeEvents-Grey .EventDayEvents a,.ThemeEvents-Grey .EventDayEvents a:visited,.ThemeEvents-Grey .EventDayEvents a:hover,.ThemeEvents-Grey .EventWeekendDayEvents a,.ThemeEvents-Grey .EventWeekendDayEvents a:visited,.ThemeEvents-Grey .EventWeekendDayEvents a:hover{font-size:10px;color:blue;font-family:Verdana}
.ThemeEvents-Grey .EventDayScroll{width:100%;height:88%;overflow:auto;position:static;font-weight:bolder;background-color:#fff}.ThemeEvents-Grey .EventOtherMonthDay{color:gray;background-color:#DCDCDC}.ThemeEvents-Grey .EventTodayDay{font-weight:700;color:#00f;background-color:#A9A9A9;border:#000 2px solid}
.ThemeEvents-Grey .EventSelectedDay{border:red 2px solid;font-size:10px}.ThemeEvents-Grey .EventSelectedDay,.ThemeEvents-Grey .EventSelectedDay a,.ThemeEvents-Grey .EventSelectedDay a:visited,.ThemeEvents-Grey .EventSelectedDay a:hover{text-align:left}
.ThemeEvents-Grey .EventSelector{background-color:silver}.ThemeEvents-Grey .EventSelector a,.ThemeEvents-Grey .EventSelector a:visited,.ThemeEvents-Grey .EventSelector a:hover{color:#606060;text-decoration:none}.ThemeEvents-Grey .WeekTable table{table-layout:auto;width:100%;font-size:10px;color:#000;font-family:Verdana;text-align:center;border:grey 1px solid}
.ThemeEvents-Grey .WeekTable table td,.ThemeEvents-Grey .WeekTable table th{border:0;padding:3px}.ThemeEvents-Grey .WeekItem{text-align:center;font-family:verdana,helvetica,arial;font-size:9px;background-color:#FFF;font-weight:400;background-color:#C0C0C0;border:1px grey solid}
.ThemeEvents-Grey .WeekDay{font-weight:700;font-size:9px;color:grey;font-family:verdana,helvetica,arial;background-color:#C0C0C0;text-align:center;vertical-align:middle;border:1px grey solid}.ThemeEvents-Grey .WeekBackground{font-family:verdana,helvetica,arial;font-size:9px;background-color:#fff;border:1px grey dotted}
.ThemeEvents-Grey .WeekTitle{font-family:verdana,helvetica,arial;font-size:9px;color:#000;height:15%;text-align:center;background-color:silver;width:11%;border:1px grey solid}.ThemeEvents-Grey .WeekOfTitle{font-weight:700;font-size:10px;width:100%;color:#333;font-family:verdana,helvetica,arial;text-align:center;vertical-align:middle}
.ThemeEvents-Grey .WeekNextPrev{font-weight:700;font-family:verdana,helvetica,arial;font-size:10px;width:100%;color:#606060;text-align:center;vertical-align:middle}.ThemeEvents-Grey .WeekRangeheader{text-align:center;vertical-align:middle;font-family:verdana,helvetica,arial;font-size:9px;background-color:#DCDCDC;border:none}
.ThemeEvents-Grey .ListTable{width:100%}.ThemeEvents-Grey .ListDate,.ThemeEvents-Grey .ListRecurText,.ThemeEvents-Grey .ListRecurUntil{font-size:10px;font-family:verdana,helvetica,arial;text-align:left;vertical-align:top;width:100px}
.ThemeEvents-Grey .ListLink{font-weight:700;font-size:10px;font-family:verdana,helvetica,arial;text-align:left;vertical-align:top}.ThemeEvents-Grey .ListHeader,.ThemeEvents-Grey .DetailEnrollGridHeader,.ThemeEvents-Grey .EditEnrollGridHeader,.ThemeEvents-Grey .EnrollGridHeader{font-size:12px;font-weight:700;color:#000;background-color:#C0C0C0;font-family:verdana,helvetica,arial;height:32px;text-align:left;vertical-align:middle}
.ThemeEvents-Grey .DetailEnrollGridHeader,.ThemeEvents-Grey .EditEnrollGridHeader,.ThemeEvents-Grey .EnrollGridHeader{text-align:center}.ThemeEvents-Grey .DetailEnrollUser,.ThemeEvents-Grey .DetailEnrollDisplay,.ThemeEvents-Grey .DetailEnrollDisplay a:link,.ThemeEvents-Grey .DetailEnrollEmail,.ThemeEvents-Grey .DetailEnrollEmail a:link,.ThemeEvents-Grey .DetailEnrollPhone,.ThemeEvents-Grey .DetailEnrollApproved,.ThemeEvents-Grey .DetailEnrollNo,.ThemeEvents-Grey .EditEnrollSelect,.ThemeEvents-Grey .EditEnrollUser,.ThemeEvents-Grey .EditEnrollDisplay,.ThemeEvents-Grey .EditEnrollDisplay a:link,.ThemeEvents-Grey .EditEnrollEmail,.ThemeEvents-Grey .EditEnrollEmail a:link,.ThemeEvents-Grey .EditEnrollPhone,.ThemeEvents-Grey .EditEnrollApproved,.ThemeEvents-Grey .EditEnrollNo,.ThemeEvents-Grey .EditEnrollDate,.ThemeEvents-Grey .EditEnrollDate .ThemeEvents-Grey .EnrollSelect,.ThemeEvents-Grey .EnrollApproved,.ThemeEvents-Grey .EnrollNo,.ThemeEvents-Grey .EnrollFee,.ThemeEvents-Grey .EnrollDate{font-size:12px;font-family:verdana,helvetica,arial;text-align:center;vertical-align:top;font-weight:400}
.ThemeEvents-Grey .ListDuration{font-size:10px;font-family:verdana,helvetica,arial;text-align:center;vertical-align:top;width:60px}.ThemeEvents-Grey .ListDataGrid,.ThemeEvents-Grey .DetailEnrollGrid,.ThemeEvents-Grey .EditEnrollGrid,.ThemeEvents-Grey .EnrollGrid{border-right:grey 2px solid;border-top:grey 1px solid;border-left:grey 2px solid;border-bottom:grey 2px solid;background-color:#e8eef7}
.ThemeEvents-Grey .ListDataGrid td,.ThemeEvents-Grey .DetailEnrollGrid td,.ThemeEvents-Grey .EditEnrollGrid td,.ThemeEvents-Grey .EnrollGrid td{border-color:grey;border-style:dotted;border-width:1px}.ThemeEvents-Grey .ListEdit{text-align:center;vertical-align:top;width:1px}
.ThemeEvents-Grey .EventNextPrev,.ThemeEvents-Grey .EventNextPrev a:link,.ThemeEvents-Grey .EventNextPrev a,.ThemeEvents-Grey .EventNextPrev a:visited,.ThemeEvents-Grey .EventNextPrev a:hover{font-size:12px;color:#666;padding:0 .5em}
.ThemeEvents-Grey .EventWeekendDay,.ThemeEvents-Grey .ListAlternate,.ThemeEvents-Grey .DetailEnrollGridAlternate,.ThemeEvents-Grey .EditEnrollGridAlternate,.ThemeEvents-Grey .EnrollGridAlternate{background-color:#F5F5F5}
.ThemeEvents-Grey .ListTitle,.ThemeEvents-Grey .ListDescription,.ThemeEvents-Grey .ListCustomField1,.ThemeEvents-Grey .ListCustomField2,.ThemeEvents-Grey .EnrollTitle{font-size:10px;font-family:verdana,helvetica,arial;text-align:left;vertical-align:top}
.ThemeEvents-Grey .ListCategory,.ThemeEvents-Grey .ListLocation,.ThemeEvents-Grey .ListLocation a{font-size:10px;font-family:verdana,helvetica,arial;text-align:left;vertical-align:top;width:60px}.ThemeEvents-Grey .RptTable{border-right:grey 2px solid;border-top:grey 1px solid;border-left:grey 2px solid;border-bottom:grey 2px solid;background-color:#e8eef7;border-collapse:collapse;width:100%}
.ThemeEvents-Grey .RptRepeater{width:100%}.ThemeEvents-Grey .RptRepeater td{border-color:grey;border-style:dotted;border-width:1px}.ThemeEvents-Grey .RptHeader{font-size:12px;font-weight:700;background-color:#C0C0C0;font-family:verdana,helvetica,arial;height:32px;text-align:center;vertical-align:middle;width:100%}
.ThemeEvents-Grey .RptNormal{font-size:10px;font-family:verdana,helvetica,arial;text-align:left;vertical-align:top}.ThemeEvents-Grey .RptAlternate{background-color:#F5F5F5;font-size:10px;font-family:verdana,helvetica,arial;text-align:left;vertical-align:top}
.ThemeEvents-Grey .RptPagerCurrentPage{color:Red}.ThemeEvents-Grey .RptPagerHeader td{border-color:grey;border-style:dotted;border-width:1px}.ThemeEvents-Grey .DetailReminder,.ThemeEvents-Grey .DetailEnroll,.ThemeEvents-Grey .DetailEnrollTable,.ThemeEvents-Grey .DetailCommands{text-align:left;width:90%}
.ThemeEvents-Grey .DetailReminderLeft,.ThemeEvents-Grey .DetailEnrollLeft{width:35%}.ThemeEvents-Grey .DetailCommandsRight{text-align:right}

Thanks,

I didnt have any luck getting that to changed. All themese show up the same way. Here is a copy of my css for the grey theme I have changed it to, with teh chagnes I thought you asked me to make. Any ideas?

.ThemeEvents-Grey .Eventtooltipheader,.ThemeEvents-Grey .Eventtooltipbody{width:300px;z-index:99;font-size:10px;font-family:Arial;padding:5px}
.ThemeEvents-Grey .Eventtooltipheader{border:#808080 1px solid;background-color:grey;color:#FFF;font-weight:700;font-size:11px; width:150px;}
.ThemeEvents-Grey .Eventtooltipbody{width:150px; border-left:grey 1px solid;border-right:grey 1px solid;border-bottom:grey 1px solid;background-color:#fff}

.ThemeEvents-Grey .Eventtooltipbody hr{width:200px;color:#000;background-color:#e0e0e0;height:1px;border:0}
.ThemeEvents-Grey .Event{table-layout:fixed;width:100%;font-size:9px;color:#000;font-family:Verdana;text-align:center;border-right:grey 2px solid;border-top:grey 1px solid;border-left:grey 2px solid;border-bottom:grey 2px solid;white-space:normal}
.ThemeEvents-Grey .EventTitle,.ThemeEvents-Grey .EventTitle td{font-weight:700;font-size:14px;width:100%;color:#333;height:20px;text-align:center;background-color:#e0e0e0;font-family:Verdana;border-bottom:0 grey solid}
.ThemeEvents-Grey .EventDayHeader{font-weight:700;font-size:12px;height:16px;background-color:silver;vertical-align:middle;font-family:Verdana;border:#707070 1px solid}.ThemeEvents-Grey .EventDay,.ThemeEvents-Grey .EventDayEvents,.ThemeEvents-Grey .EventWeekendDayEvents{font-size:10px;text-align:left;height:100px;vertical-align:top;color:#000;font-family:Verdana;background-color:#C0C0C0;border:1px grey solid}
.ThemeEvents-Grey .EventDayEvents a,.ThemeEvents-Grey .EventDayEvents a:visited,.ThemeEvents-Grey .EventDayEvents a:hover,.ThemeEvents-Grey .EventWeekendDayEvents a,.ThemeEvents-Grey .EventWeekendDayEvents a:visited,.ThemeEvents-Grey .EventWeekendDayEvents a:hover{font-size:10px;color:blue;font-family:Verdana}
.ThemeEvents-Grey .EventDayScroll{width:100%;height:88%;overflow:auto;position:static;font-weight:bolder;background-color:#fff}.ThemeEvents-Grey .EventOtherMonthDay{color:gray;background-color:#DCDCDC}.ThemeEvents-Grey .EventTodayDay{font-weight:700;color:#00f;background-color:#A9A9A9;border:#000 2px solid}
.ThemeEvents-Grey .EventSelectedDay{border:red 2px solid;font-size:10px}.ThemeEvents-Grey .EventSelectedDay,.ThemeEvents-Grey .EventSelectedDay a,.ThemeEvents-Grey .EventSelectedDay a:visited,.ThemeEvents-Grey .EventSelectedDay a:hover{text-align:left}
.ThemeEvents-Grey .EventSelector{background-color:silver}.ThemeEvents-Grey .EventSelector a,.ThemeEvents-Grey .EventSelector a:visited,.ThemeEvents-Grey .EventSelector a:hover{color:#606060;text-decoration:none}.ThemeEvents-Grey .WeekTable table{table-layout:auto;width:100%;font-size:10px;color:#000;font-family:Verdana;text-align:center;border:grey 1px solid}
.ThemeEvents-Grey .WeekTable table td,.ThemeEvents-Grey .WeekTable table th{border:0;padding:3px}.ThemeEvents-Grey .WeekItem{text-align:center;font-family:verdana,helvetica,arial;font-size:9px;background-color:#FFF;font-weight:400;background-color:#C0C0C0;border:1px grey solid}
.ThemeEvents-Grey .WeekDay{font-weight:700;font-size:9px;color:grey;font-family:verdana,helvetica,arial;background-color:#C0C0C0;text-align:center;vertical-align:middle;border:1px grey solid}.ThemeEvents-Grey .WeekBackground{font-family:verdana,helvetica,arial;font-size:9px;background-color:#fff;border:1px grey dotted}
.ThemeEvents-Grey .WeekTitle{font-family:verdana,helvetica,arial;font-size:9px;color:#000;height:15%;text-align:center;background-color:silver;width:11%;border:1px grey solid}.ThemeEvents-Grey .WeekOfTitle{font-weight:700;font-size:10px;width:100%;color:#333;font-family:verdana,helvetica,arial;text-align:center;vertical-align:middle}
.ThemeEvents-Grey .WeekNextPrev{font-weight:700;font-family:verdana,helvetica,arial;font-size:10px;width:100%;color:#606060;text-align:center;vertical-align:middle}.ThemeEvents-Grey .WeekRangeheader{text-align:center;vertical-align:middle;font-family:verdana,helvetica,arial;font-size:9px;background-color:#DCDCDC;border:none}
.ThemeEvents-Grey .ListTable{width:100%}.ThemeEvents-Grey .ListDate,.ThemeEvents-Grey .ListRecurText,.ThemeEvents-Grey .ListRecurUntil{font-size:10px;font-family:verdana,helvetica,arial;text-align:left;vertical-align:top;width:100px}
.ThemeEvents-Grey .ListLink{font-weight:700;font-size:10px;font-family:verdana,helvetica,arial;text-align:left;vertical-align:top}.ThemeEvents-Grey .ListHeader,.ThemeEvents-Grey .DetailEnrollGridHeader,.ThemeEvents-Grey .EditEnrollGridHeader,.ThemeEvents-Grey .EnrollGridHeader{font-size:12px;font-weight:700;color:#000;background-color:#C0C0C0;font-family:verdana,helvetica,arial;height:32px;text-align:left;vertical-align:middle}
.ThemeEvents-Grey .DetailEnrollGridHeader,.ThemeEvents-Grey .EditEnrollGridHeader,.ThemeEvents-Grey .EnrollGridHeader{text-align:center}.ThemeEvents-Grey .DetailEnrollUser,.ThemeEvents-Grey .DetailEnrollDisplay,.ThemeEvents-Grey .DetailEnrollDisplay a:link,.ThemeEvents-Grey .DetailEnrollEmail,.ThemeEvents-Grey .DetailEnrollEmail a:link,.ThemeEvents-Grey .DetailEnrollPhone,.ThemeEvents-Grey .DetailEnrollApproved,.ThemeEvents-Grey .DetailEnrollNo,.ThemeEvents-Grey .EditEnrollSelect,.ThemeEvents-Grey .EditEnrollUser,.ThemeEvents-Grey .EditEnrollDisplay,.ThemeEvents-Grey .EditEnrollDisplay a:link,.ThemeEvents-Grey .EditEnrollEmail,.ThemeEvents-Grey .EditEnrollEmail a:link,.ThemeEvents-Grey .EditEnrollPhone,.ThemeEvents-Grey .EditEnrollApproved,.ThemeEvents-Grey .EditEnrollNo,.ThemeEvents-Grey .EditEnrollDate,.ThemeEvents-Grey .EditEnrollDate .ThemeEvents-Grey .EnrollSelect,.ThemeEvents-Grey .EnrollApproved,.ThemeEvents-Grey .EnrollNo,.ThemeEvents-Grey .EnrollFee,.ThemeEvents-Grey .EnrollDate{font-size:12px;font-family:verdana,helvetica,arial;text-align:center;vertical-align:top;font-weight:400}
.ThemeEvents-Grey .ListDuration{font-size:10px;font-family:verdana,helvetica,arial;text-align:center;vertical-align:top;width:60px}.ThemeEvents-Grey .ListDataGrid,.ThemeEvents-Grey .DetailEnrollGrid,.ThemeEvents-Grey .EditEnrollGrid,.ThemeEvents-Grey .EnrollGrid{border-right:grey 2px solid;border-top:grey 1px solid;border-left:grey 2px solid;border-bottom:grey 2px solid;background-color:#e8eef7}
.ThemeEvents-Grey .ListDataGrid td,.ThemeEvents-Grey .DetailEnrollGrid td,.ThemeEvents-Grey .EditEnrollGrid td,.ThemeEvents-Grey .EnrollGrid td{border-color:grey;border-style:dotted;border-width:1px}.ThemeEvents-Grey .ListEdit{text-align:center;vertical-align:top;width:1px}
.ThemeEvents-Grey .EventNextPrev,.ThemeEvents-Grey .EventNextPrev a:link,.ThemeEvents-Grey .EventNextPrev a,.ThemeEvents-Grey .EventNextPrev a:visited,.ThemeEvents-Grey .EventNextPrev a:hover{font-size:12px;color:#666;padding:0 .5em}
.ThemeEvents-Grey .EventWeekendDay,.ThemeEvents-Grey .ListAlternate,.ThemeEvents-Grey .DetailEnrollGridAlternate,.ThemeEvents-Grey .EditEnrollGridAlternate,.ThemeEvents-Grey .EnrollGridAlternate{background-color:#F5F5F5}
.ThemeEvents-Grey .ListTitle,.ThemeEvents-Grey .ListDescription,.ThemeEvents-Grey .ListCustomField1,.ThemeEvents-Grey .ListCustomField2,.ThemeEvents-Grey .EnrollTitle{font-size:10px;font-family:verdana,helvetica,arial;text-align:left;vertical-align:top}
.ThemeEvents-Grey .ListCategory,.ThemeEvents-Grey .ListLocation,.ThemeEvents-Grey .ListLocation a{font-size:10px;font-family:verdana,helvetica,arial;text-align:left;vertical-align:top;width:60px}.ThemeEvents-Grey .RptTable{border-right:grey 2px solid;border-top:grey 1px solid;border-left:grey 2px solid;border-bottom:grey 2px solid;background-color:#e8eef7;border-collapse:collapse;width:100%}
.ThemeEvents-Grey .RptRepeater{width:100%}.ThemeEvents-Grey .RptRepeater td{border-color:grey;border-style:dotted;border-width:1px}.ThemeEvents-Grey .RptHeader{font-size:12px;font-weight:700;background-color:#C0C0C0;font-family:verdana,helvetica,arial;height:32px;text-align:center;vertical-align:middle;width:100%}
.ThemeEvents-Grey .RptNormal{font-size:10px;font-family:verdana,helvetica,arial;text-align:left;vertical-align:top}.ThemeEvents-Grey .RptAlternate{background-color:#F5F5F5;font-size:10px;font-family:verdana,helvetica,arial;text-align:left;vertical-align:top}
.ThemeEvents-Grey .RptPagerCurrentPage{color:Red}.ThemeEvents-Grey .RptPagerHeader td{border-color:grey;border-style:dotted;border-width:1px}.ThemeEvents-Grey .DetailReminder,.ThemeEvents-Grey .DetailEnroll,.ThemeEvents-Grey .DetailEnrollTable,.ThemeEvents-Grey .DetailCommands{text-align:left;width:90%}
.ThemeEvents-Grey .DetailReminderLeft,.ThemeEvents-Grey .DetailEnrollLeft{width:35%}.ThemeEvents-Grey .DetailCommandsRight{text-align:right}

Thanks,

Add

.Eventtooltip{width:200px}

to the end of the Events-Grey.css file.

I tried that with no luck. Sorry! Any other ideas? Thanks so much for your help.

Is your site still up, and with that addition? I'd like to take a look.

Whoops. Yes it's there. And, when I look at your site the popups are wider.

Make sure that your browswer is refreshing the CSS files. Clear cache. CTRL-F5.

It is correct in firefox and chrome. But is not displaying correctly in IE.

I notice that your page is rendering in "Quirks" mode. If you set your skin for XHTML Compliance mode, it will work. As a side benefit, you will have fewer cross-browser issues.

You might want to look at these tutorials for some information:

How to select DOC TYPES in DotNetNuke 4.4
How to create an XHTML Compliant DotNetNuke 4.4
XHTML Compliant DotNetNuke 4.4 and 4.5 - part 2
How to create a DotNetNuke CSS skin from an XHTML template – part 1
How to create a DotNetNuke CSS skin from an XHTML template – part 2

The main issue that you need to deal with is XHTML Compliance and the DOCTYPE. In DotNetNuke 6.x, you can set a default (fallback) DOCTYPE on the Host Settings page.