I'm developing an aspx page using Visual Studio 2008 where I have a png image of a map of my country and many other png images, one for each state of my country. I'm trying to place these other images (little dots) over the image of the map using relative positioning. But I place the controls in design time at the position I want (under menu Format -> Position...) and when I open the page in any browser, I get a totally different position of those controls.
To illustrate what I'm explaining, I'll include 2 pics, one of my page in design time and other one opened in IE:
(Ops! When I was posting the question I discovered that new users can't post image tags, so I'll try to post just the links, sorry)
at design-time in VS
at runtime in IE
Does anybody know why is this happening and how to fix/deal with it?
Thanks a lot in advance.
Greetings, R.
Have you tried setting the width and height on the parent / containing element (presumably the map)?
I've had some problems with absolute and relatively positioned elements in IE before and giving the containing parent element a width and / or height seemed to fix it.
After some days fighting with VS, I finally discovered a way to set the position in design-time and have the same position at runtime: I had to put every image inside a div element and have this div positioned where I wanted.
I don't know why, but this way I have the very same position when I open the aspx page in the browser. A little more work to do, wrapping all images inside a div, but I could only have success this way.
Related
I'm going nuts on this, I can't figure out what causes the margins of the right sidebar gallery images to be rendered differently on opera browser. More specifically the bottom margin of the images seems to be doubled in every other common browser, its set to 2px and only opera displays it as 2 px.
This is the url - http://www.roxopolis.de/media See screenshots here.
Please help me out with this, I don't care too much about the fact that its displayed differently but it exposes a bit of the following gallery images which are supposed to remain hidden so thats what bothers me. If there is another way to hide the following images (which are placed by widget) that'd be fine too. Maybe setting the margin conditionally for opera?
I've had a quick look at the page in Dragonfly as well as Chrome's inspector for comparison and no particular style, including inherited ones, strikes me as "causing" this issue. Maybe someone else can find something, but at a glance, I'd say Opera seems to be "doing the right thing".
You might have more control over the spacing if you put each anchor tag along with its respective image inside its own container and tried to style those (e.g. a div containing the anchor containing the image for each item, and float them left within the parent container div).
Is there a particular reason you have more images than you want to display? I don't see any controls to scroll the images on that page, so I'm not sure why you need to have more than the six images you're showing already. Surely if you have code somewhere that randomises the order, you can change it so that it only displays the first six images.
Also, have you tried breaking the problem down to a smaller use case that can be tested/tweaked in a jsfiddle? That may help to get to the bottom of your issue if you can't solve it using the above suggestion.
We are instituting a new responsive web template design on our website, this design has worked perfectly in all but one place (We are on the Convio CMS if that helps). Here is what it is supposed to look like (menu and contact info in right column):
http://www.ucc.org/feed-your-spirit/practices/prayer-flags.html
On this page however:
http://www.ucc.org/find/find-a-ucc-church.html
that info appears below here. However after you use the find feature, the information then DOES appear on the right side as it should. This really has me stumped.
The find a church service is a component that can be placed on any page.
Secondary issue - the map is not visible on the results page in Firefox, though on the current page - www.ucc.org/find - it is visible.
Any solutions, ideas, etc. are welcome!
Two problems, both CSS. The left div, ef-inner3 does not have float:left nor width specified. This causes it to be too wide, pushing the topics area down.
You need to add those CSS values in. How you do that with your particular CMS system I am not sure.
The reason behind it moving down is thus: When you float two elements, their combined widths cannot be greater than the width of their parent. If they are greater then there is not enough room and the second floated item moves below the first.
Tricky one! But I'm thinking this might not be CSS.
My first reaction was that maybe a DIV isn't properly closed somewhere.
Based on the Find function fixing it, maybe you have a </div> that's set to display with the Find results, so it's not showing up before the Find function brings it up?
Hope that makes sense! If possible, try searching for any closing tags that are inside any kind of if/else statement.
EDIT - just noticed - A lot of the content in your Find a Church page seems to be after the 'three fourth' DIV, and after a 'clear' DIV. If you can edit the source, try placing all of that back inside the 'three fourth' DIV and see what happens.
I have created a simple HTML page with a centred DIV for content. I have a repeater image on the DIV to give a border effect.
When viewing the HTML page in IE & FF, it loads correctly. No scrollbars and all divs fill the whole page to 100%.
When I move this over to a ASP.Net MasterPage, it all goes pear shaped. The centre DIV only fills as far as the content goes.
I've tried several attacks, but I'm out of luck. I've tried JavaScript to onLoad resize the div, setting the form elements to have a style attribute - nothing however gives me the same results as the standard HTML page.
So, what I am I doing wrong? Why do I suck at this? Please show me how this is done.
Many thanks,
Run your simple page, view the HTML source and save it. Then run your master page example, view the HTML source and save it. Compare the two, which will let you know what HTML and/or CSS differences you have. From there, make changes to your master and content pages so that they output the same HTML as your simple page.
Sorry, should have posted before - I resolved the issue. It was the DOCTYPE element at the top of the page. Removing this means it works.
I did pretty much what you suggested, using Beyond Compare.
Thanks for you help though.
I using Ajax ModalPopupExtender but problem with this is menu in appication is display over the ModalPopupExtender. I also set z-index=1 for ModalPopupExtender and z-index=100 for but problem not solved.
After a few minutes of learning how to use Developer Tools (F12 on Chrome/IE), I finally got to the root of the problem.
I'm going to assume one of two things to be true here:
1. Your Main Menu is either on a Master Page, and the ModalPopupExtender control is inside a Child page.
2. The ModalPopupExtender control is placed within the same div that holds the rest of the page's content (except for the Main Menu) and this div has a z-index lower than the div that contains the Main Menu. (Even if you haven't specified these z-index values explicitly, these divs will inherit values automatically.)
If your situation falls into the first category, then here's what's going on: The generated markup places the lightbox inside one div, along with the rest of the child page's content (say wrapperContent), and the Main Menu inside another (say wrapperHeader). The z-index for wrapperHeader MUST be more than the z-index of wrapperContent, or else the submenus will fall beneath the content when they drop down. Now no matter what value of z-index you specify for the lightbox, it will always be displayed under every element inside wrapperHeader, since it inherits its z-index from wrapperContent, which is lower than that of wrapperHeader.
A similar explanation follows in case your situation falls into the second category.
#Jack Marchetti this also explains why this is fixed when you place the lightbox in a div of its own, seperated from the content of the rest of the page.
I hope this helps.
Use Firebug(Firefox Extension) or something similar to inspect the Z-Index of your menu. Then set the ModalPopupExtender's Z-Index 1 higher.
Without seeing a live page, I can't guess the z-index, but it must be greater than 100. You can try setting it to 10001 or something wildly high.
I have done Asp.Net development for around 4 years, my experience tells me to stay away from Microsoft's AJAX libraries especially AJAX Control Toolkit. There are bugs in there that they don't seem intent on fixing.
My advice to you: Use another library. I am using JQuery now, the plugins you find for JQuery on the net are of widely varying quality but some of them are really good and others I have bugfixed myself (I only choose the ones where I can quickly understand the code).
JQuery UI has a very high quality, it includes a dialog widget I am using instead of the ModalPopupExtender. If you dont like the window style, check out one of the 15 plugins presented on this page: 15+ jQuery Popup Modal Dialog Plugins and Tutorials.
Set the z-index to something reallly large like #Jab mentioned.
I also found that if you place the ModalPopupExtender at the bottom of your HTML Markup, it sometimes fixes it for some very strange reason. Give it a try.
I have a web page that includes an iframe as well a DHTML calendar widget. The page displays correctly as well as the content inside the iframe. The problem is when I activate the calendar which is positioned close enough to the iframe that some of the calendar is hidden by the iframe.
I have tried to manipulate the positioning of the iframe by using both javascript and CSS (Zindex, z-index) but the iframe always appears as the top most layer on the page obscurring any parent DHTML content that gets rendered in the same area as the iframe. I also changed the css of the DHTML calendar to values > 0 and wrapped the widget scriplet in a div/span with a high z-index value but no luck.
The z-index of an iframe is handled in a weird way by IE. If you can get rid of it, I'd recommend you do and just embeded the content in a regular Div.
If you don't have other choices than do it like this, keep in mind that the z-index of elements like and will be infinite in IE6. So the way to stack that is to use iframes with higher zindexes, so that it will be infinity vs infinity+1.
An example of this is vs stacking. Both have infinite z-index, but you can stack them. Checkout Stu Nicholls code, that could be helpful.
That's pretty bad thought, my fix would be to avoid having other fields in this area.
Google for "IE z-index bug" for a variety of examples and solutions to similar problems. The html specification states that z-index should be absolute, but in IE it can be determined for an element if a parent element is positioned. In extreme circumstances, I've had to trace back up the DOM tree from the element that's causing problems and set the z-index attribute on whatever parent element has position, not on the element that is being obscured (and should rightfully have its z-index set). IE Developer toolbar can help for dynamic debugging if it's really a mess, just start setting the z-index properties up the tree until you find the one that makes it looks right.
You can definitely cover the iFrame with a div.
The thing is you can't use z-index unless you use position:relative, or position:absolute, or position: fixed on the calandar div.
What you want to do is change the "position" CSS property of the calandar to be "relative". If your iFrame has the normal static positioning (meaning you didn't add any special positioning to it, this will work).
If your iFrame has "absolute" positioning, you might need to do "position:absolute" on the calandar.
See link: http://resopollution.com/test/test.html
(works in all modern browsers including IE6)
I just realized that the problem seems to be related to the MSXML and how IE transforms XML documents. The XML has an XSLT stylesheet association which the browser uses to transform the XML document. The output of the transformation is an HTML document. I didn't think it was import to disclose that I my HTTP response was XML since the HTML is what is rendered in the end, but it does matter.
When the source of the IFRAME is an HTML document everything works fine. The DHTML is not covered by the IFRAME. But when MSXML is used to transform the IFRAME content this is when the problem occurs. Below are some sample files that illustrate the problem.
For the DHTML compoenent I am using the spiffycalendar widget but I would imagine any DHTML element would produce the same results.
PARENT.HTML
IFRAME DHTML CONFLICT EXAMPLE
var pickupdate=new ctlSpiffyCalendarBox("pickupdate", "mainF", "PICKUP_DATE","btnDate1","",1);
</script>
PARENT WINDOW
FIELD
FIELD
FIELDpickupdate.writeControl();
FIELD
FIELD
FIELD
Save Changes
IFRAME.HTML
IFRAME.XSL
]>
TEST XML DOC
IFRAME CONTENT