I have two pages with identical code. One has an aspx extension, one htm. In Firefox they display exactly the same. In IE8, my dropdown menus appear layered beneath the content...but only on the aspx page. There's a slight positioning discrepancy in IE8 between the two as well. Again, identical code, and pointing to the same css and js files...how is this even possible?
http://webdev.craftonhills.edu/Admissions_and_Financial%20Aid.aspx
http://thelionscall.com/temp/menutest/
I really need to get this working in the aspx file. Thanks.
One of the pages has a FORM tag and a div with a hidden input in it that the other doesn't.
IE will render default padding/margin on a form tag, when many other browsers will not.
I suggest using a good CSS reset.
Related
Whenever I am trying to include an .html page (which contain a navigation bar in bootstrap code) in my jsp page, then it doesn't show all the details on navigation bar. But whenever I tried to include it in a separate single page, it shows everything. It is clear that there might be a conflicting .css file, because I have some code in my jsp file.
How can I fix this?
Without being able to examine the css in question myself (which might help matters) all I can really do is advise how to examine CSS.
Using Google Chrome, the best way to figure out CSS conflicts is to right click on an element - e.g. the problematic nav bar - and click Inspect Element.
This should bring up a bar similar to the one shown here:
Note the styling details on the left - it allows you to easily trace where the CSS that affects the element you've inspected comes from. More importantly, it also has a line through 'padding:.6em .8em;' - this is an overridden style, and the padding a bit further below which has no underlines is the style that overrides it.
If you're having CSS problems like this, you should be able to trace which styles are being overridden using the chrome inspect window. If you post your CSS, I might be able to be a bit more specific.
I cannot get hyperlinks to show up as an overlay (or watermark) in front of an image, as they should. Instead, I believe something is being overwritten by my WordPress theme's CSS, leaving plain HTML hyperlinks below the image.
Here is what my page looks like:
But here's what it's supposed to look like:
Here is what Chrome Inspect Element is telling me (Full image):
Here is what Firebug is telling me (Full image):
Unfortunately, I'm clueless with CSS. I believe my WordPress default theme is overriding some important settings, but I'm unsure what/how to adjust things. I can simply add !important clauses to things in my custom CSS, but I'm unsure as to what to put or how to put it.
Here is the stylesheet associated with my website, and here is a website that has the exact same thing I have, except it's functioning properly.
Any guidance in this regard would be greatly appreciated!
My page is HTML standalone page & it calls 2 css files.
Here is the page: http://exbackart.com/Squeeze-page%20-%20Copy.html
As I am not a tech person, I have given some styles right from the HTML.
The issue is, my lower optin form is giving margin issues in chrome. The page is working fine with Firefox, you can check it out but chrome is giving issue with lower optin form.
Kindly show me how to get rid if this problem. As I am not a coder, if you can show me what should I replace OR remove, that would be great.
Thanks for your help.
I would suggest creating a separate <div> inside "bodyBox" and putting your problematic table in there. Dividing things up into more discrete div elements should help you to have more control over the page organization.
I've got a fairly simple design that I'm working on in ASP.NET.
The problem is when I take the design from flat HTML which works fine, to asp.net, it adds what looks to be a 20px blank margin at the top of the page and around certain elements.
I presumed this was to do with the not having set my margins to 0px on the body and form elements in the CSS. I've done this, and it still has the problem in Chrome and Firefox, but not in IE7 or IE8.
Any ideas?
I've seen some unwanted margins on ASP.NET pages and they had something to do with invalid markup (might have been because of a missing div end tag or something similar - I can't remember the exact reason). So check your markup. Also make sure that you are using a valid doctype (i.e. not in quirks rendering mode).
Firebug is often a great help in this kind of situations. You can inspect exactly which element is causing the extra margins. Chrome has a similar "Inspect element" functionality built in.
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.