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.
Related
I recently imported CSS Bootstrap into my website, so that I could add a toolbar to it. All went well, except that the text of my website now cuts off at the bottom. I set the overflow of the body to scroll, to no avail. The website scrolls a little bit, but then the scroll bar stops before the end of the content. If you zoom out on the browser, you can see all of the content.
The home page is a fairly long chunk of code, especially if I include the bootstrap, so I am not inclined to copy it here. Have any of you encountered this, and do you remember / can you suggest how to rectify it?
Some of you suggested a link, and you're right. Here is the page in question: http://www.zipcodeconquest.com/home.php
In your CSS, try changing your body height to "auto". Just a guess without seeing your code or a screenshot...
look for a white-space:nowrap or white-space:pre property. Your container might have one of these styles and forces your text content to be displayed in a way that overlap it.
I have gone thru the site and searched for the last two hours and am trying to get a wordpress site to work correctly. Everything is working except the white box that holds the content will not go to the bottom no matter what I try. I have tried all the options here but I think it may be that I do not understand enough about css or the divs are all messed up from the template. Can someone please help out with what I have crossed. My page is located at http://craftedimages.com/AA/aae-events/ and you will see the white box on the right that does not extend down. I got this template and have been modifying it of which there were already lots of problems. Thanks for your time ahead of time.
Try adding
#page{
height:1035px;
}
..to the css - the sidebar is this height and although it is auto that is the given height
Hope this helps
Using chrome inspect element. I can see that your <div id="wrapper"></div> has the style
height:auto;
set it to
height:100%;
That should fix it. Only do that for this page. The other pages are set to auto because it forms to their content. This page doesn't have enough content to reach the bottom like the rest of the pages.
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've ported the Wordpress app from wordpress.org to my web site. I've changed the html and the css to conform to my existing design. I've placed the entry data in my 'main' div, which has a left margin of 19em to keep it to the right of my navigation div. This margin appears to be overridden somehow by the generated html within the 'main' div. I've patched some of the elements by adding the margin back to them, but would prefer a cleaner fix. I've looked at the page using Firebug, but I can't identify the appropriate entry. What is overriding my margin setting?
The problem page is here. Notice the Tags at the bottom.
Another page that doesn't use WordPress code doesn't have this problem. It is here.
Thanks for any help
I want to keep my acceptance rate high so I don't appear ungrateful for all the great help on this site. The answer was that the css was defined as a class and the html was using 'id='. Sometimes it helps to make sure the computer is plugged in.
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.