13 replies [Last post]
jhermiz
Offline
newbie
Last seen: 13 years 8 weeks ago
Joined: 2008-02-23
Posts: 7
Points: 0

Hi folks, Im a CSS newbie, so Im not sure if CSS is the issue here.
I posted this at another forum but got no help so please look at this link:

http://www.sqlteam.com/forums/topic.asp?TOPIC_ID=97775

before reading any further since it provides an animated gif of my issue. If you went to that site
you will notice 2 animated gifs showing my app. Everytime I click on a tab (CSS tab) and move my mouse over say another tab on the page or anywhere on the page then the page shifts to the left.
You will notice that by watching the animation when I click on a tab and then move my mouse around. If I click on a tab and move down the page it doesnt shift however it affects all my buttons and asp.net calendar controls by shifting these controls (you will notice the trouble in the second animated gif from that link when I am trying to click on a day in the calendar).

Anyhow I decided that this is not a programming question and maybe it is the CSS I am using so here is the CSS for the tabs:

#tabsJ {
float:left;
width:100%;
background:#FFFFFF;
font-size:93%;
line-height:normal;
border-bottom:1px solid #24618E;
font: 13px arial bold;
}
#tabsJ ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsJ li {
display:inline;
margin:0;
padding:0;
}
#tabsJ a {
float:left;
background:url("../images/tableftJ.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsJ a span {
float:left;
display:block;
background:url("../images/tabrightJ.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}

#tabsJ #current a {
background-position:0% -42px;
}
#tabsJ #current a span {
background-position:100% -42px;
color:#FFF;
}

And then in my web page (html) I just do this:

  • Home
  • Log Time Off
  • Views
  • Reports
  • My Profile
  • Help
  • Admin

Can anyone shed some light as to why this is happening and how to fix it ?

Thanks so much and sorry for being such a newbie Smile.

Thanks

Jon

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 11 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

You posted that yesterday

You posted that yesterday :rolleyes: Give it a few more days there, and if you still get no answer, come back here.

P.s. snippets of code are no help. Post it all, or better yet a link to the page

Verschwindende wrote:
  • CSS doesn't make pies

jhermiz
Offline
newbie
Last seen: 13 years 8 weeks ago
Joined: 2008-02-23
Posts: 7
Points: 0

Well thats mainly a SQL

Well thats mainly a SQL forum that I frequently visit...this is more of a web page issue / css issue. So its probably best I post in here...

I did post the entire CSS above...but I did not post the entire HTML. Here is the entire HTML..(yuck)

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Entry.aspx.vb" Inherits="entry" %>



Time Off Tracker

A.info { Z-INDEX: 24; COLOR: #000; POSITION: relative; BACKGROUND-COLOR: #FFFFFF; TEXT-DECORATION: none }
A.info:hover { Z-INDEX: 25; BACKGROUND-COLOR: #D4EDFF }
A.info SPAN { DISPLAY: none }
A.info:hover SPAN { BORDER-RIGHT: #D4EDFF 1px solid; BORDER-TOP: #D4EDFF 1px solid; DISPLAY: block; FONT-SIZE: 12px; LEFT: 2em; BORDER-LEFT: #D4EDFF 1px solid; WIDTH: 15em; COLOR: #fff; BORDER-BOTTOM: #D4EDFF 1px solid; FONT-FAMILY: arial; POSITION: absolute; TOP: 2em; BACKGROUND-COLOR: #24618E; TEXT-ALIGN: center }


 








tk logo




Welcome

, today is

|
Log Out


 









  • Home

  • Log Time Off

  • Views

  • Reports

  • My Profile

  • Help

  • Admin






 













 Statistics

 







 Time Frame: 
This Year
All Time









 Type:












 Statisticswhat do these stats mean?Statistics allows you to quickly see your request/accrual totals.
Total Accrued stands for the # of hours you have accrued.
Past Reqs with approved status display requests that were made before today's date that have been approved.
Future Reqs with approved status are requests that have been made that are after today's date that have been approved.
Total Available displays your total accrued hours minus your approved requests.
Future Reqs with a pending status are requests that have been made after today's date that have not been approved / declined yet.
Past Reqs with a pending status are requests made before today's date that have not been approved / declined.
Future Reqs with a declined status are requests that were scheduled after today's date that were declined.
Past Reqs with a declined status are requests made before today's date that were declined.






' Text='<%#DataBinder.Eval(Container, "DataItem.Type") %>'>




'>




'>







[HyperLink1]



  







 Key

 













'>


































 
Expand Details...

  







Personnel Off: 

 
 helpPersonnel Off displays employees that are in the same functional group as you who have already requested time off based on the Start and End dates you have selected below.




Access:


 



Unique ID:

 



Client:

 




Employee:

 

|
[HyperLink2]




Status:

 





Sent On:

 




Created By:

 



Created On:

 



 

Status By:

 



Status On:

 




Edited By:

 



Edited On:

 







 Standard Mode
|
Wizard Mode

  







 
Click here to create a new request!



Request Type:

 

helpRequest Type is the
type of time off that you are requesting.





Dates:




Select
a Start & End Date




Jump To:

Year...
2008
2009
2010
2011
2012
2013
2014
2015
 
Month...
January
February
March
April
May
June
July
August
September
October
November
December




 Start:  












    


 End:   














(Weekends, holidays, & current requests are automatically filtered.)









Hours Per Day:

 8
helpHours Per Day is simply the number of hours you want off per day. If this is a Vacation request make sure you DO NOT ENTER the total number of hours, simply enter the number of hours per day (8 for a full day / 4 for a half day)!




Estimated Hours:


 

helpEstimated Hours calculates the number of hours based on the 'Hours' field as well as the Start / End date range above. If you manually modify the Start and End dates then click the Refresh button to the left.



Comments:

 



Approver:

 


 helpApprover is the
person who will receive your time off request upon submitting this form. In most cases this is your manager who is in charge of approving your time off requests.




Request Action :

 
Save & Submit Now
Save Now Submit Later
helpRequest Action is the
action or process you want to take upon saving this time off request.







 







 
Click here to create a new request!


















Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Well if that's your html

Well if that's your html code the stuff before the doctype is putting IE into quirks mode and you really, really, don't want to have to deal with that. Get rid of everything before the doctype declaration.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

jhermiz
Offline
newbie
Last seen: 13 years 8 weeks ago
Joined: 2008-02-23
Posts: 7
Points: 0

No you cannot get rid of

No you cannot get rid of that as this is asp.net. I should of said that...
ASP.net needs to know the code file (code behind page .vb or .cs) as well as the class name etc. Getting rid of that would make the code page not functional and that would be a definitie no no. I really truly think it has something to do with the css tabs...but not sure what to look for in that as I am a newbie with that. Anyone else have any other ideas that might make sense..Im not even sure how to google my issue. I've tried site moves because of CSS and "Web Page movement due to CSS tabs" but not sure what else to try...

Triumph (not verified)
Anonymous's picture
Guru

http://csscreator.com/node/19

http://csscreator.com/node/19116 (second post)

Also, please explain why you are serving XHTML 1.1

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

I'm sorry, but it is just a

I'm sorry, but it is just a fact that IE will not render in standards mode if there is anything before the doctype line. That's not something you have any control over.

.ASP code should not ever appear in the output from your server, so I suspect that you are not actually showing us your html, but are showing before it goes through the server side processing. But we must see the html that's sent by the server to the browser, since that's the only thing that can affect how a browser displays it.

If you can't give us an actual link then you probably won't get very quick help. But if you cannot then you must show us what is sent to the browsers after server side processing. And you must show us all of it, along with all the CSS.

But really, if you want help quickly, put it on a live page and give us a link. Why make our job harder than it needs to be when you are asking us to spend our time to give you free help?

And as Triumph says, do not ever use XHTML 1.1 IE simply cannot handle it so it is just not viable on the web.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Suzy
Suzy's picture
Offline
Regular
Last seen: 13 years 33 weeks ago
Joined: 2003-05-30
Posts: 48
Points: 0

space before doctype

a lot of dynamic sites both asp and php have code before the doctype, but as long as it doesn't generate whitespace it foesn't affect the doctype - when you can't get rid.. you need to close it up

like

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Entry.aspx.vb" Inherits="entry" %>

as long as the last closing asp tag (it's the same with PHP ?>) is on the same line as the doctype it should be OK

as for your code it is the full generated source folks would need to see, and which browser is the "jump" happening in

as for what to search try 'moving or jumping content on hover', I tend to agree and think it's the tabs

Suzy

jhermiz
Offline
newbie
Last seen: 13 years 8 weeks ago
Joined: 2008-02-23
Posts: 7
Points: 0

Sorry here is the html for

Sorry here is the html for the page:



Time Off Tracker


A.info { Z-INDEX: 24; COLOR: #000; POSITION: relative; BACKGROUND-COLOR: #FFFFFF; TEXT-DECORATION: none }
A.info:hover { Z-INDEX: 25; BACKGROUND-COLOR: #D4EDFF }
A.info SPAN { DISPLAY: none }
A.info:hover SPAN { BORDER-RIGHT: #D4EDFF 1px solid; BORDER-TOP: #D4EDFF 1px solid; DISPLAY: block; FONT-SIZE: 12px; LEFT: 2em; BORDER-LEFT: #D4EDFF 1px solid; WIDTH: 15em; COLOR: #fff; BORDER-BOTTOM: #D4EDFF 1px solid; FONT-FAMILY: arial; POSITION: absolute; TOP: 2em; BACKGROUND-COLOR: #24618E; TEXT-ALIGN: center }


 








tk logo




Welcome

jhermiz, today is
2/24/2008
|
Log Out


 









  • Home

  • Log Time Off

  • Views

  • Reports

  • My Profile

  • Help

  • Admin






 













 Statistics

 








 Time Frame: 

This Year

All Time










 Type:


Pay Instead Of Time Off
Vacation
All









 Statisticswhat do these stats mean?Statistics allows you to quickly see your request/accrual totals.
Total Accrued stands for the # of hours you have accrued.
Past Reqs with approved status display requests that were made before today's date that have been approved.
Future Reqs with approved status are requests that have been made that are after today's date that have been approved.
Total Available displays your total accrued hours minus your approved requests.
Future Reqs with a pending status are requests that have been made after today's date that have not been approved / declined yet.
Past Reqs with a pending status are requests made before today's date that have not been approved / declined.
Future Reqs with a declined status are requests that were scheduled after today's date that were declined.
Past Reqs with a declined status are requests made before today's date that were declined.



TypeStatusTotal


Total Accrued



15.40



Past Reqs

Approved

0.00



Future Reqs

Approved

0.00



Total Available



15.40









0.00



Future Reqs

Pending

0.00



Past Reqs

Pending

0.00



Future Reqs

Declined

0.00



Past Reqs

Declined

0.00







Accruing 7.70 hours.
Annual benefit is 200.00 hours...




  








 Key

 












Available Requests:

        



Holidays:

        



Pay Days:

        



Pay Instead Of Time Off:

        



Vacation:

        



Weekends:

        























 
Expand Details...

  







 Standard Mode
|
Wizard Mode

  








 New 'Pending' Request For 'Hermiz, Jon' - Read/Write Access




Request Type:

 Pay Instead Of Time OffVacation
helpRequest Type is the
type of time off that you are requesting.

You must select a request type!



Dates:




Select
a Start & End Date




Jump To:

Year...
2008
2009
2010
2011
2012
2013
2014
2015

 
Month...
January
February
March
April
May
June
July
August
September
October
November
December





 Start:  


<February 2008>
MonTueWedThuFriSatSun    1234567891011121314151617181920212223242526272829         


    


 End:   

<February 2008>
MonTueWedThuFriSatSun    1234567891011121314151617181920212223242526272829         






(Weekends, holidays, & current requests are automatically filtered.)









Hours Per Day:

 
per day helpHours Per Day is simply the number of hours you want off per day. If this is a Vacation request make sure you DO NOT ENTER the total number of hours, simply enter the number of hours per day (8 for a full day / 4 for a half day)!
Field cannot be blank!



Estimated Hours:


 8

helpEstimated Hours calculates the number of hours based on the 'Hours' field as well as the Start / End date range above. If you manually modify the Start and End dates then click the Refresh button to the left.



Comments:

 



Approver:

 Hermiz, Jon

 helpApprover is the
person who will receive your time off request upon submitting this form. In most cases this is your manager who is in charge of approving your time off requests.




Request Action :

 Save & Submit NowSave Now Submit Later helpRequest Action is the
action or process you want to take upon saving this time off request.







 







 New 'Pending' Request For 'Hermiz, Jon' - Read/Write Access





















Not sure what you mean by why am i serving xml 1.1 ? I have to use visual studio.net to write my code as it is a web page with .net code in the code pages (C# / VB.net). DO I need to change that line ?

Triumph (not verified)
Anonymous's picture
Guru

jhermiz wrote:Not sure what

jhermiz wrote:
Not sure what you mean by why am i serving xml 1.1 ?

Then you shouldn't be.

jhermiz wrote:
I have to use visual studio.net to write my code as it is a web page with .net code in the code pages (C# / VB.net).
That has nothing to do with the doctype. Just change it to XHTML 1.0 Strict or HTML 4.01 Strict.

jhermiz wrote:
DO I need to change that line ?

I would. I would also stop using tables for layout. Smile

Suzy
Suzy's picture
Offline
Regular
Last seen: 13 years 33 weeks ago
Joined: 2003-05-30
Posts: 48
Points: 0

positioning and tables

don't go well together..

remove the absolute positioning form the master table

...

to

...

then if you want the body, html margins and padding to be zero (as in you want that table to start the very top left corner of the viewport} simply override the html and body defaults:

in the CSS:
html, body {margin: 0; padding: 0;}

IE was causing the positioning of the entire table to move to the body padding whenever any link with a background change was hovered upon. Ie gets confused at the best of times, but the postioning that table seems unecessary anyway imho.

Suzy

jhermiz
Offline
newbie
Last seen: 13 years 8 weeks ago
Joined: 2008-02-23
Posts: 7
Points: 0

Suzy that worked!!!!

Suzy that worked!!!! Wow....Thank You SOO MUCH! Can you explain why it was happening though ?

Thanks,
Jon

jhermiz
Offline
newbie
Last seen: 13 years 8 weeks ago
Joined: 2008-02-23
Posts: 7
Points: 0

Can you give me the exact

Can you give me the exact line I need to change and what it should change to.

Right now I have:

Suzy
Suzy's picture
Offline
Regular
Last seen: 13 years 33 weeks ago
Joined: 2003-05-30
Posts: 48
Points: 0

looks fine

that Doctype looks fine.. but view the source code of your page, as mentioned before there shouldn't be anything, white space or <xml prolog> before it in the source.. if there is whitespace which is generated by ASP code in your application, then it can be closed up as mentioned before..

glad it worked

it worked because IE has problems, it doesn't like to count Wink

the HTML and BODY elements have default margins and/or padding, sorry can't remember the exact amounts or what is where as I always zero them now..
You were not overriding these values but instead were forcing the table itself to the absolute zero of the page in order to compensate. Every time a background change on hover is effected in IE a redraw of the page is performed, every time that redraw is performed IE has to count to be able to position itself properly (or not as the case was), it doesn't like that and sometimes was thinking that the absolute zero was inside the BODY padding - a refresh or subsequent hover change is sometimes enough to remind it to count properly!

.. zeroing the HTML/BODY defaults simply makes it very clear to IE what your intentions are and avoids it having to count hehe.. that's the non-technical version. A lot of IE's problems are shown/triggered by rolling over a link with a background change, and most all of it's bugs have a lot to do with making it count! Oh and I said also tables themselves don't always go very well with absolute positioning.

anyway, lots of things I do now I've forgotten why or are just habit, so perhaps there's a better explanation but hth anyway

Suzy